1

checked is not work at load time, when i edit html in inspect elment and put checked in radio then after apply checked css.

on radio select is working fine. 

input[type="radio"]:checked:after {
    content: "x";
    font-size: 20px;
    position: absolute;
    bottom: 0;
    right: 0;
    top: -1px;
    left: 0;
    display: flex;
    align-content: center;
    justify-content: center;
}
   
input[type="radio"] {
    height: 35px;
    width: 35px;
    background-color: #f2f2f2;
    border: 1px solid #f2f2f2;
    float: left;
    display: inline-block;
    box-shadow: none;
    position: relative;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-out;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    margin: 0;
    margin-top: 4px;
    margin-right: 10px;
}
<div class="col-md-8 col-sm-8 p-left">
<input type="radio" name="ltv-filter" class="form-control" data-checkbox="ltv-filter" data-percentage="90" data-ltv-render="halifax"> <label>90% LTV</label>
<input type="radio" name="ltv-filter" class="form-control" data-checkbox="ltv-filter" data-percentage="85" data-ltv-render="halifax"> <label>85% LTV</label>
<input type="radio" name="ltv-filter" class="form-control" data-checkbox="ltv-filter" data-percentage="75" data-ltv-render="halifax" checked=""> <label>75% LTV</label>
<input type="radio" name="ltv-filter" class="form-control" data-checkbox="ltv-filter" data-percentage="60" data-ltv-render="halifax"> <label>60% LTV</label>
</div>

please help me. what's wrong there?

  • 5
    `input` is not container element, so it can't have `:before`/`:after` inside it [Can I use the :after pseudo-element on an input field?](http://stackoverflow.com/questions/2587669/can-i-use-the-after-pseudo-element-on-an-input-field) – Justinas Mar 21 '17 at 09:08
  • @Justinas then what should i do ? –  Mar 21 '17 at 09:11

1 Answers1

0

I think this issue occur when multiple radio come in loop with same name. if your your radio is generate in loop then try following tips.

<div class="col-md-8 col-sm-8 p-left">
<input type="radio" name="ltv-filter[0]" class="form-control" data-checkbox="ltv-filter" data-percentage="90" data-ltv-render="halifax"> <label>90% LTV</label>
<input type="radio" name="ltv-filter[0]" class="form-control" data-checkbox="ltv-filter" data-percentage="85" data-ltv-render="halifax"> <label>85% LTV</label>
<input type="radio" name="ltv-filter[0]" class="form-control" data-checkbox="ltv-filter" data-percentage="75" data-ltv-render="halifax" checked="">      <label>75% LTV</label>
<input type="radio" name="ltv-filter[0]" class="form-control" data-checkbox="ltv-filter" data-percentage="60" data-ltv-render="halifax"> <label>60% LTV</label>
</div>

i hope this tips help someone.

Suresh Suthar
  • 794
  • 8
  • 15