I can not use input radio to do other things

Question

I can not use input radio to do other things

Navigation

#1 by (1 votes)

1

My idea and the next one, I think if it is to do this type of validation with js it will be heavier since it will have to send more code and carry out more process! This validation is not so important then not the need. Is this idea convenient or very wrong?

.seletor{
  width: 160px;
  height: 60px;
  margin-bottom: 10px;
  background-color: #9b9b9b;
}

#r1:checked .seletor:first-child{
  background-color: orange;
}
#r2:checked .seletor:nth-child(2){
  background-color: purple;
}
#r3:checked .seletor:nth-child(3){
  background-color: yellow;
}

<input type="radio" name="c_1" id="r1">
<input type="radio" name="c_1" id="r2">
<input type="radio" name="c_1" id="r3">

<label for="r1">
  <div class="seletor">ooo</div>
</label>
<label for="r2">
  <div class="seletor">ooo</div>
</label>
<label for="r3">
  <div class="seletor">ooo</div>
</label>

html5 css3

asked by anonymous 31.12.2017 / 21:46

1 answer

Product Registration with Select Multiple does not insert all selected Error Kotlin does not find bytecode for lambda function: "Failed to find byte code for java / util / function / BiConsumer"

score 1 · Answer 1

AKU as I said above in the comment of your question, if the use of color is only for the user experience , to guide you in some sense and do not need validation in the bank there is Why do you worry about that?

On changing color with RadioButton my solution was to use the adjacent selectors and attr[] to reach div and change the color, see below the CSS for you to understand better and see working. Basically I just added the line:

#r1:checked ~ label[for="r1"] > div.seletor {}

.seletor{
  width: 160px;
  height: 60px;
  margin-bottom: 10px;
  background-color: #9b9b9b;
  cursor: pointer;
}
input[type="radio"] {
  cursor: pointer;
}
#r1:checked ~ label[for="r1"] > div.seletor{
  background-color: orange;
}
#r2:checked ~ label[for="r2"] > div.seletor{
  background-color: purple;
}
#r3:checked ~ label[for="r3"] > div.seletor{
  background-color: yellow;
}

<input type="radio" name="c_1" id="r1">
<input type="radio" name="c_1" id="r2">
<input type="radio" name="c_1" id="r3">

<label for="r1">
  <div class="seletor">ooo</div>
</label>
<label for="r2">
  <div class="seletor">ooo</div>
</label>
<label for="r3">
  <div class="seletor">ooo</div>
</label>