activate the borders when the checkbox is active

Question

activate the borders when the checkbox is active

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I'm trying to activate the borders of a box when the checkbox is selected but it is 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 html5 css css3

asked by anonymous 21.04.2017 / 16:24

2 answers

How to install version 6.10.3 of the nodejs without being through the terminal Catching on array data

score 0 · Answer 1

.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 >

score 0 · Answer 2

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>