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; } 

jsfiddle demo

just edit label class (just example) :

label {   cursor: pointer;   display:inline-block;   width: 50px;   position:relative; } 

Comments

Popular posts from this blog

amazon web services - S3 Pre-signed POST validate file type? -

c# - Check Keyboard Input Winforms -