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):
<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
Post a Comment