Image Border within Select Radio after choosing an option

Question

Image Border within Select Radio after choosing an option

Navigation

#1 by (8 votes)
#2 by (6 votes)
#3 by (0 votes)

7

I have a virtual store in which it generates the following HTML of a select that has image inside it. I would like to hide the input (ball of the select radio) and display only one border in the image that is selected that will match the select selected.

Important

Theinputradiowillautomaticallybegeneratedinthestorewithhtmlidenticaltothis,thedifferencewillbethatineachproducttheinputnamewillbedifferent,inthesemyexampleshavethenamesoption[238]andoption[239].Butthestorewillgeneratemoreotherslikeoption[240],option[241]...

Ananswerbelow@MateusVelosohelpedmeifmycodehadonlyinputradiowithitsproperoptions.Butmycasewillhavemorethaninputradio.Withthis,thesolutionofitleavesonlythelastinputradiomarkedwiththeborderandtheotherinputswithitsdueoptionsdoesnotshowwhattheuser'schoicewas. See the demo here.

The input will be single-selection, but will have more than one inpupt radio each with its options and only one of them can be checked. For example, there is the% Color "Insole Color" with their respective colors (only one of them can be marked), then it has "Color Solved" with their respective colors and so it goes. The fact is that they will not have a defined name, they will be generated automatically. In the example link I placed, the "Insole Color" has input radio but may have a different name.

Here you can see the code working:

#product .radio {
    display: inline-block;
	margin-right:10px;
}
.radio {
    position: relative;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
}
.radio input[type=radio] {
    position: absolute;
    margin-top: 4px;
    margin-left: -20px;
}
#product .radio label {
    display: block;
    background: none;
    color: #111111;
    text-align: center;
    border: none;
    padding: 0;
	font-size:0;
}
#product .radio label input {
	margin-left: 15px;
}

<div id="product">
    <div class="form-group required">
        <label class="control-label">Cor Palmilha</label>
        <div id="input-option238">
            <div class="radio">
                <label>
                    <input type="radio" name="option[238]" value="56">
                        <img src="https://s19.postimg.org/krdm2veer/cor-produto-cinza.jpg"alt="Cinza" class="img-thumbnail"> 
                </label>
            </div>
            <div class="radio">
                <label>
                    <input type="radio" name="option[238]" value="55">
                        <img src="https://s19.postimg.org/da4ennovn/cor-produto-verde.jpg"alt="Verde" class="img-thumbnail"> 
                </label>
            </div>
        </div>
    </div>
    
    <div class="form-group required">
        <label class="control-label">Cor Solado</label>
        <div id="input-option239">
            <div class="radio">
                <label>
                    <input type="radio" name="option[239]" value="66">
                        <img src="https://s19.postimg.org/krdm2veer/cor-produto-cinza.jpg"alt="Cinza" class="img-thumbnail"> 
                </label>
            </div>
            <div class="radio">
                <label>
                    <input type="radio" name="option[239]" value="67">
                        <img src="https://s19.postimg.org/da4ennovn/cor-produto-verde.jpg"alt="Verde" class="img-thumbnail"> 
                </label>
            </div>
        </div>
    </div>
</div>

javascript css

asked by anonymous 03.07.2017 / 17:35

3 answers

6

Functional example

$(function(){
  $('input[type=radio]').on('change',function(){
    $('.radio').css('border','');
    $(this).parent().parent().css('border','2px solid red');
  });
});

#product .radio {
    display: inline-block;
	margin-right:10px;
}
.radio {
    position: relative;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
}
.radio input[type=radio] {
    position: absolute;
    margin-top: 4px;
    margin-left: -20px;
}
#product .radio label {
    display: block;
    background: none;
    color: #111111;
    text-align: center;
    border: none;
    padding: 0;
	font-size:0;
}
#product .radio label input {
	margin-left: 15px;
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="product">
    <div class="form-group required">
        <label class="control-label">Cor Palmilha</label>
        <div id="input-option238">
            <div class="radio">
                <label>
                    <input type="radio" name="option[238]" value="56">
                        <img src="https://s19.postimg.org/krdm2veer/cor-produto-cinza.jpg"alt="Cinza" class="img-thumbnail"> 
                </label>
            </div>
            <div class="radio">
                <label>
                    <input type="radio" name="option[238]" value="55">
                        <img src="https://s19.postimg.org/da4ennovn/cor-produto-verde.jpg"alt="Verde" class="img-thumbnail"> 
                </label>
            </div>
        </div>
    </div>
</div>

03.07.2017 / 18:36

0

It is possible to solve the problem only with the same CSS, if HTML has a label tag referencing the radio node.

* {
  transition: all 0.5s ease;
}
input {
    visibility:hidden;
}
label {
    display: block;
    width: 21px;
    height: 21px;
    border: 2px;
    border-style: solid;
    border-color: #d2d2d2;
    background: #c32121;
    cursor: pointer;
    float: left;
    margin: 5px;
}
input:checked + label {
    border-color: #c32121;
}

<form action="">
  <input type="radio" name="product" value="p1" id="p1">
  <label for='p1'></label>
  <input type="radio" name="product" value="p2" id="p2">
  <label for='p2'></label>
  <input type="radio" name="product" value="p3" id="p3">
  <label for='p3'></label>
</form>

One of the advantages of this solution is to be "natively" executed by the browser (because it does not have JS), so the code will run faster along with all other CSS content.

06.07.2017 / 16:16

What is the way to truncate a string in Csharp? How to create and read an XML with Python?

score 8 · Accepted Answer

You can do this with CSS only:

#product .radio label input + img {
  border: 1px solid white;
}
#product .radio label input:checked+img {
  border: 1px solid red;
}

This changes the border color of the image when input is selected. I also hid the input with opacity: 0; to not be visible

#product .radio {
  display: inline-block;
  margin-right: 10px;
}

.radio {
  position: relative;
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
}

.radio input[type=radio] {
  position: absolute;
  margin-top: 4px;
  margin-left: -20px;
  opacity: 0;
}

#product .radio label {
  display: block;
  background: none;
  color: #111111;
  text-align: center;
  border: none;
  padding: 0;
  font-size: 0;
}

#product .radio label input + img {
  border: 1px solid white;
}
#product .radio label input:checked+img {
  border: 1px solid red;
}

<div id="product">
  <div class="form-group required">
    <label class="control-label">Cor Palmilha</label>
    <div id="input-option238">
      <div class="radio">
        <label>
                    <input type="radio" name="option[238]" value="56">
                        <img src="https://s19.postimg.org/krdm2veer/cor-produto-cinza.jpg"alt="Cinza" class="img-thumbnail"> 
                </label>
      </div>
      <div class="radio">
        <label>
                    <input type="radio" name="option[238]" value="55">
                        <img src="https://s19.postimg.org/da4ennovn/cor-produto-verde.jpg"alt="Verde" class="img-thumbnail"> 
                </label>
      </div>
    </div>
  </div>

  <div class="form-group required">
    <label class="control-label">Cor Solado</label>
    <div id="input-option239">
      <div class="radio">
        <label>
                    <input type="radio" name="option[239]" value="66">
                        <img src="https://s19.postimg.org/krdm2veer/cor-produto-cinza.jpg"alt="Cinza" class="img-thumbnail"> 
                </label>
      </div>
      <div class="radio">
        <label>
                    <input type="radio" name="option[239]" value="67">
                        <img src="https://s19.postimg.org/da4ennovn/cor-produto-verde.jpg"alt="Verde" class="img-thumbnail"> 
                </label>
      </div>
    </div>
  </div>
</div>