enable Borders when checkbox is enabled

Asked

Viewed 35 times

0

I am trying to activate the edges of a box when the checkbox is selected but not working.

.radio input[type="radio"]:checked+.border {
  border: 3px solid #f70024 !important;
}
<div class="col-md-3 border">
  <div class="radio-inline radio input_type">
    <input id="Vodafone" name="73_answer" type="radio" value="Vodafone">
    <label title="Vodafone" for="Vodafone">Stack Overflow em Português</label>
  </div>
</div>

html css html5 css3

  • Please translate your question, this is Stackoverflow at portuguese.

  • I’m sorry but I had an idea that it was in the English version, anyway I have translated.

  • activate the edges of that box?

2 answers

0

.border {
    display:block;
    width:200px;
    height:100px;
    background-color:grey;
    position: relative;
}
label {
    width: 100%;
    height: 100%;
    display: block;
}
img{
  margin-left: 20px;
}

input[type="radio"] {
    position: absolute;
}

input[type="radio"]:checked + label {
    border: red 1px solid;
}
 <div class="border">
        <input id="vodafone" name="radio-group1" type="radio" />
        <label title="Vodafone" for="Vodafone"><img src="14924254061490110677vodafone7.jpg"></label>
   </div >

0

Compatibility: Google Chrome, Safari, Microsoft Edge.

CSS 

input[type="radio"] {
  height: 1.2em;
  width: 1.2em;
  vertical-align: middle;
  margin: 0 0.4em 0.4em 0;
  border: 1px solid rgba(0, 0, 0, 0.3);
  -webkit-appearance: none;
  -webkit-transition: box-shadow 200ms;
}


input[type="radio"] {
  -webkit-border-radius:100%;
   border-radius:100%;
}

/* input checked */
input[type="radio"]:checked {
  border-color:#f70024;
  border-width:3px;
}

input[type="radio"]:checked:before {
  display: block;
  height: 0.3em;
  width: 0.3em;
  position: relative;
  left: 0.2em;
  top: 0.2em;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 100%;
  content: '';
}
<div class="col-md-3 border">
<div class="radio-inline radio input_type">

    <input id="Vodafone" name="73_answer" type="radio" value="Vodafone">

</div>

</div>

Browser other questions tagged html css html5 css3

You are not signed in. Login or sign up in order to post.