css - Overriding Boostrap Box-Sizing Universal Selector -


bootstrap defines following:

* {     -webkit-box-sizing: border-box;     -moz-box-sizing: border-box;     box-sizing: border-box }  :after, :before {     -webkit-box-sizing: border-box;     -moz-box-sizing: border-box;     box-sizing: border-box } 

unfortunately messes radio buttons using theme (java primefaces):

enter image description here

    <div class="ui-radiobutton ui-widget">    <div class="ui-helper-hidden-accessible">       <input id="form:quest:0:questionid:0" name="form:quest:0:questionid" type="radio" value="yes" onchange="primefaces.ab({s:'form:quest:0:questionid',e:'valuechange',p:'form:quest:0:questionid',u:'form:quest:0:msgquestion'});" checked="checked" />    </div>    <div class="ui-radiobutton-box ui-widget ui-corner-all ui-state-default ui-state-active">       <span class="ui-radiobutton-icon ui-icon ui-icon-bullet" />    </div> </div> 

i want fix radio button class (.ui-radiobutton-icon) universal selector seems override when use !important reset style content-box. e.g.

.ui-radiobutton-icon, .ui-radiobutton-icon:before, .ui-radiobutton-icon:after     {     -webkit-box-sizing: content-box !important;     -moz-box-sizing: content-box !important;     box-sizing: content-box !important; } 

this did trick. targetting wrong element.

   .ui-radiobutton-box         {         -webkit-box-sizing: content-box;         -moz-box-sizing: content-box;         box-sizing: content-box;     } 

Comments

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -