html - Radio button's appearing one over another -
i have custom radio buttons on application. issue radio buttons display fine individually. when try have 2 of them in 1 line... appear on each other instead of beside each other. can't change html , can mess css. appreciated. thinking due width of each label giving low width had same result.
html:
<label class="radio"> <input type="radio"> <span class="custom"><span>one</span></span> </label>
css:
* { box-sizing: border-box; } input[type="radio"] { display: none; cursor: pointer; } label { cursor: pointer; } .radio span.custom > span { margin-left: 22px; } .radio .custom { background-color: #fff; border: 1px solid #ccc; border-radius: 3px; display: inline-block; height: 20px; left: 0; position: absolute; top: 0; width: 20px; } .radio input:checked + .custom:after { background-color: #0574ac; border-radius: 100%; border: 3px solid #fff; content: ""; display: block; height: 12px; position: absolute; top: 0; width: 12px; } .radio input + .custom { border-radius: 100%; } .checkbox input:checked .custom { background-color: blue; border-color: blue; }
just edit label class (just example) :
label { cursor: pointer; display:inline-block; width: 50px; position:relative; }
Comments
Post a Comment