html - Style bootsrap radio buttons via images -

-

i attempting style radio buttons using images, via background-color property. using bootstrap, code sequence looks this:

<div id="something">     <div class="radio">         <label>             <input id="some_id" value="yes" type="radio">             yes         </label>     </div>      <div class="radio">         <label>             <input id="some_id2" checked="" value="no" type="radio">             no         </label>     </div> </div>

what want edit it's icons checked, unchecked, focused, checked-focused , disabled states. don't want text have background, icon in front of it.

css: 

.radio label {     line-height: 40px;     min-height: 40px; } .radio label{     background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/google_%22g%22_logo.svg/1024px-google_%22g%22_logo.svg.png");   background-size: 40px 40px;     background-repeat: no-repeat;     background-position: center;     width: 40px;     height: 40px; } .radio label:checked{     background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/apple_logo_black.svg/170px-apple_logo_black.svg.png");   }

fiddle: https://jsfiddle.net/ql2wab24/

you can use css3 radio button styles,

radio{      position: reletive;      overflow: hidden;}  .radio label {      line-height: 40px;      min-height: 40px;  }  .radio label{      background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/google_%22g%22_logo.svg/1024px-google_%22g%22_logo.svg.png");    background-size: 40px 40px;      background-repeat: no-repeat;      width: 40px;      height: 40px;      display: block;      padding: 0 0 0 50px;  }  .radio input[type="radio"]:checked~label{      background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/apple_logo_black.svg/170px-apple_logo_black.svg.png");    }  .radio label:focus{      background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/apple_logo_black.svg/170px-apple_logo_black.svg.png");    }  .radio input[type="radio"]:checked~label:focus{      background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/google_%22g%22_logo.svg/1024px-google_%22g%22_logo.svg.png");    }      .radio input[type="radio"]{position: absolute;top: 0; left: 0; z-index: -1; opacity: 0; visibility: hidden;}
<div id="something">      <div class="radio">              <input id="some_id" value="yes" type="radio" name="name">          <label for="some_id">              yes          </label>      </div>        <div class="radio">              <input id="some_id2" checked="" value="no" type="radio" name="name">          <label for="some_id2">              no          </label>      </div>  </div>


Comments

Post a Comment

Popular posts from this blog

javascript - Laravel datatable invalid JSON response -

-
everything work fine on code below fetch user logs: js: <script> $(document).ready(function () { var table =$('#systemlogs').datatable({ responsive: true, processing: true, serverside: true, "language": { "url": "/datatables/media/plug-in/persian.json" }, ajax: '{!! url('/admin/systemlogs/data/systemlogsdatatable') !!}', columns: [ { data: 'name', name: 'name' }, { data: 'message_text', name: 'message_text' }, { data: 'remote_addr', name: 'remote_addr' }, { data: 'log_created_at', name: 'management_logs.created_at' }, { data: 'log_updated_at', name: 'management_logs.updated_at' }, ] }); }); </script> routes: route::get('/systemlogs/data/systemlogsdatatable','systemlogscontrolle...
Read more

java - Exception in thread "main" org.springframework.context.ApplicationContextException: Unable to start embedded container; -

-
i getting error when run spring application: exception in thread "main" org.springframework.context.applicationcontextexception: unable start embedded container; nested exception org.springframework.context.applicationcontextexception: unable start embeddedwebapplicationcontext due missing embeddedservletcontainerfactory bean. @ org.springframework.boot.context.embedded.embeddedwebapplicationcontext.onrefresh(embeddedwebapplicationcontext.java:124) @ org.springframework.context.support.abstractapplicationcontext.refresh(abstractapplicationcontext.java:476) @ org.springframework.boot.context.embedded.embeddedwebapplicationcontext.refresh(embeddedwebapplicationcontext.java:109) @ org.springframework.boot.springapplication.refresh(springapplication.java:691) @ org.springframework.boot.springapplication.run(springapplication.java:320) @ org.springframework.boot.springapplication.run(springapplication.java:952) @ org.springframework.boot.springa...
Read more

sql server 2008 - My Sql Code Get An Error Of Msg 245, Level 16, State 1, Line 1 Conversion failed when converting the varchar value '8:45 AM' to data type int -

-
msg 245, level 16, state 1, line 1 conversion failed when converting varchar value '8:45 am' data type int. script declare @specimenid bigint = 0, @script varchar(max); declare @starttime int = (select convert(int,substring(start_time,0,charindex(':', start_time)) - 12) appt appt._id=112601) --select @starttime set @script = 'select distinct ptlast_name + '', '' + pt.first_name patient_name, dbo.formatdate(pt.dob,''mm/dd/yyyy'') dob, (convert(varchar, (datediff(yy, dob, appt_date) - case when (month(dob) > month(appt_date)) or (month(dob) = month(appt_date) , day(dob) > day(appt_date)) 1 else 0 end)) + ''/'' + convert(varchar, (datediff(m, dateadd(yy, (datediff(yy, dob, appt_date) - case when (month(dob) > month(appt_date)) or (month(dob) = month(appt_date) , day(dob) > day(appt_date)) 1 else 0 end), d...
Read more