Apply CSS style to a selected radio button (checked) label

Question

Apply CSS style to a selected radio button (checked) label

Navigation

#1 by (5 votes)

2

I have a problem working with CSS and HTML: using CSS properties I changed the style of the radios I am working with, but the problem I have is that they are not selected, to this I mean that the button is not selected. Believe (which is a radio).

This is the related CSS code:

#pregunta input[type=radio]{
     display: none;
}

#pregunta label {
  display: inline-block;
  margin: 4px;
  padding: 8px;
  background: #FAE3BB;
  color: #4C3000;
  width: calc(50% - 8px);
  min-width: 100px;
  cursor: pointer;
}

#pregunta label:hover {
  background: #EBBB67;
}

#pregunta input[type=radio]:checked + label {
  background: #CB8306;
  color: #FAFAFA;

}

And here is the code in question (also available in CodePen :

* {
  margin: 0px;
  padding: 0px;
  font: 16px;
  border: none;
  box-sizing: border-box;
}

html,
body {
  background: #ccc;
  text-align: center;
  width: 100%;
  height: 100%;
}

html {
  display: table;
}

body {
  display: table-cell;
  vertical-align: middle;
}

#examen {
  margin: -44px 50px 0px;
  position: relative;
  width: calc(100% - 100px);
  color: black;
  background-color: black;
}

#examen h1 {
  color: white;
  font-weight: 600;
  font-size: 30px;
  text-transform: uppercase;
  text-align: left;
  line-height: 44px;
}

#pregunta {
  padding: 20px;
  background: #FAFAFA;
}

#pregunta h2 {
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 20px;
}

#pregunta input[type=radio] {
  display: none;
}

#pregunta label {
  display: inline-block;
  margin: 4px;
  padding: 8px;
  background: #FAE3BB;
  color: #4C3000;
  width: calc(50% - 8px);
  min-width: 100px;
  cursor: pointer;
}

#pregunta label:hover {
  background: #EBBB67;
}

#pregunta input[type=radio]:checked+label {
  background: #CB8306;
  color: #FAFAFA;
}

<body>
  <div id="examen">
    <h1 id="nombrePregunta"> </h1>
    <div id="pregunta">
      <label for="pregunta1">pregunta1</label>
      <input type="radio" name="pregunta1" value="pregunta1">
      <label for="pregunta2">pregunta2</label>
      <input type="radio" name="pregunta2" value="pregunta2">
      <label for="pregunta3">pregunta3</label>
      <input type="radio" name="pregunta3" value="pregunta3">
      <label for="pregunta4">pregunta4</label>
      <input type="radio" name="pregunta4" value="pregunta4">
    </div>
  </div>
</body>

javascript html5 html css radiobutton

asked by Juan Jose Estrella 03.07.2017 в 03:14

source

1 answer

Checking duplicate MySQL records Assign object of a class and object of a class x

score 5 · Accepted Answer

There are several problems in the code:

Radios do not have id and all have different name . This is important because the label points to the id of the target fields and right now none has ID. Also, since they all have different name , once marked they will never be unmarked.

As I was saying, the label should point to the id and not the name as they point now.

You have the label in front of the checkboxes but then in the CSS you indicate that the checkbox should be in front of the label (in this rule: #pregunta input[type=radio]:checked + label ). This would lead to confusion because the next answer would be marked instead of the one you clicked.

Adding IDs, changing to a% common% co and correcting the order of the HTML so that it is name and then checkbox already works:

* {
  margin: 0px;
  padding: 0px;
  font: 16px;
  border: none;
  box-sizing: border-box;
}

html,
body {
  background: #ccc;
  text-align: center;
  width: 100%;
  height: 100%;
}

html {
  display: table;
}

body {
  display: table-cell;
  vertical-align: middle;
}

#examen {
  margin: -44px 50px 0px;
  position: relative;
  width: calc(100% - 100px);
  color: black;
  background-color: black;
}

#examen h1 {
  color: white;
  font-weight: 600;
  font-size: 30px;
  text-transform: uppercase;
  text-align: left;
  line-height: 44px;
}

#pregunta {
  padding: 20px;
  background: #FAFAFA;
}

#pregunta h2 {
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 20px;
}

#pregunta input[type=radio] {
  display: none;
}

#pregunta label {
  display: inline-block;
  margin: 4px;
  padding: 8px;
  background: #FAE3BB;
  color: #4C3000;
  width: calc(50% - 8px);
  min-width: 100px;
  cursor: pointer;
}

#pregunta label:hover {
  background: #EBBB67;
}

#pregunta input[type=radio]:checked + label {
  background: #CB8306;
  color: #FAFAFA;
}

<body>
  <div id="examen">
    <h1 id="nombrePregunta"> </h1>
    <div id="pregunta">
      <input type="radio" name="pregunta" value="pregunta1" id="pregunta1">
      <label for="pregunta1">pregunta1</label>
      <input type="radio" name="pregunta" value="pregunta2" id="pregunta2">
      <label for="pregunta2">pregunta2</label>
      <input type="radio" name="pregunta" value="pregunta3" id="pregunta3">
      <label for="pregunta3">pregunta3</label>
      <input type="radio" name="pregunta" value="pregunta4" id="pregunta4">
      <label for="pregunta4">pregunta4</label>
    </div>
  </div>
</body>