Персонализирани квадратчета за отметка + скрити квадратчета за html

[Ticketa]

Успях да "скрия" отметките/checkbox обаче, не успявам да "активирам" различния цвят background-color: #ffe405; , къде бъркам?

css

Code: Select all

.icon div{
  cursor:  pointer;
  display: inline-block;
}
.icon input {
  position:   absolute;
  visibility: hidden;
}	
.icon input:checked + div {
	background-color: #ffe405;
	color: #000;
}

Code: Select all

<link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.1.0/css/flag-icon.min.css" rel="stylesheet">
<div class="icon-list row">
<label for="lng-us" class="col-4">
<div class="icon" ><input type="checkbox" name="lang_enabled[]" value="us" id="lng-us"  /><span class="flag-icon flag-icon-us"> </span> United States</div>
</label>
<label for="lng-de" class="col-4">
<div class="icon" ><input type="checkbox" name="lang_enabled[]" value="de" id="lng-de"  /><span class="flag-icon flag-icon-de"> </span> Deutsch</div>
</label>
<label for="lng-es" class="col-4">
<div class="icon" ><input type="checkbox" name="lang_enabled[]" value="es" id="lng-es"  /><span class="flag-icon flag-icon-es"> </span> Español</div>
</label>
</div>

[uphero]

https://jsfiddle.net/tjwc0koL/

[Ticketa]

Благодаря.

Промяната , която виждам , е че
.icon input:checked + div {

Става на
.icon input:checked + label {

Нали така?

Code: Select all

<div class="avatarbox">
<label for="cb1" style="display:inline">
<input type="radio" name="avatar_register" id="cb1"  value="1" />
<img src="https://www.svgrepo.com/show/17592/users.svg" width="74px" height="74px" />
</label>

<label for="cb10" style="display:inline">
<img src="https://www.svgrepo.com/show/17592/users.svg" width="74px" height="74px" />
<input type="radio" name="avatar_register" id="cb10"  value="10" />
</label>

<label for="cb11" style="display:inline">
<img src="https://www.svgrepo.com/show/17592/users.svg" width="74px" height="74px" />
<input type="radio" name="avatar_register" id="cb11"  value="11" />
</label>

<label for="cb12" style="display:inline">
<img src="https://www.svgrepo.com/show/17592/users.svg" width="74px" height="74px" />
<input type="radio" name="avatar_register" id="cb12"  value="12" />
</label>

<label for="cb13" style="display:inline">
<img src="https://www.svgrepo.com/show/17592/users.svg" width="74px" height="74px" />
<input type="radio" name="avatar_register" id="cb13"  value="13" />
</label>

<label for="cb14" style="display:inline">
<img src="https://www.svgrepo.com/show/17592/users.svg" width="74px" height="74px" />
<input type="radio" name="avatar_register" id="cb14"  value="14" />
</label>

<label for="cb15" style="display:inline">
<img src="https://www.svgrepo.com/show/17592/users.svg" width="74px" height="74px" />
<input type="radio" name="avatar_register" id="cb15"  value="15" />
</label>

<label for="cb16" style="display:inline">
<img src="https://www.svgrepo.com/show/17592/users.svg" width="74px" height="74px" />
<input type="radio" name="avatar_register" id="cb16"  value="16" />
</label>

<label for="cb2" style="display:inline">
<img src="https://www.svgrepo.com/show/17592/users.svg" width="74px" height="74px" />
<input type="radio" name="avatar_register" id="cb2"  value="2" />
</label>

<label for="cb3" style="display:inline">
<img src="https://www.svgrepo.com/show/17592/users.svg" width="74px" height="74px" />
<input type="radio" name="avatar_register" id="cb3" checked value="3" />
</label>

<label for="cb4" style="display:inline">
<img src="https://www.svgrepo.com/show/17592/users.svg" width="74px" height="74px" />
<input type="radio" name="avatar_register" id="cb4"  value="4" />
</label>

<label for="cb5" style="display:inline">
<img src="https://www.svgrepo.com/show/17592/users.svg" width="74px" height="74px" />
<input type="radio" name="avatar_register" id="cb5"  value="5" />
</label>

<label for="cb6" style="display:inline">
<img src="https://www.svgrepo.com/show/17592/users.svg" width="74px" height="74px" />
<input type="radio" name="avatar_register" id="cb6"  value="6" />
</label>

<label for="cb7" style="display:inline">
<img src="https://www.svgrepo.com/show/17592/users.svg" width="74px" height="74px" />
<input type="radio" name="avatar_register" id="cb7"  value="7" />
</label>

<label for="cb8" style="display:inline">
<img src="https://www.svgrepo.com/show/17592/users.svg" width="74px" height="74px" />
<input type="radio" name="avatar_register" id="cb8"  value="8" />
</label>

<label for="cb9" style="display:inline">
<img src="https://www.svgrepo.com/show/17592/users.svg" width="74px" height="74px" />
<input type="radio" name="avatar_register" id="cb9"  value="9" />
</label></div>

Code: Select all

.avatarbox input[type="radio"][id^="cb"] {
  display: none;
}
 .avatarbox label {
  border: 1px solid #fff;
  padding: 10px;
  display: block;
  position: relative;
  margin: 10px;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

 .avatarbox label::before {
  background-color: white;
  color: white;
  content: " ";
  display: block;
  border-radius: 50%;
  border: 1px solid grey;
  position: absolute;
  top: -5px;
  left: -5px;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 28px;
  transition-duration: 0.4s;
  transform: scale(0);
}

 .avatarbox label img {
  height: 100px;
  width: 100px;
  transition-duration: 0.2s;
  transform-origin: 50% 50%;
}

.avatarbox input:checked + label {
  border-color: #ddd;
}

.avatarbox input:checked + label::before {
  content: "✓";
  background-color: grey;
  transform: scale(1);
}

.avatarbox input:checked + label img {
  transform: scale(0.9);
  box-shadow: 0 0 5px #333;
  z-index: -1;
}

Обаче пак не става

https://jsfiddle.net/bsn57kah/

[Revelation]

Ами ти си набутал всичко в label и си задал селектора да е + label.

[uphero]

първия виж https://jsfiddle.net/2gpzk0Lm/