Radio input Checked CSS not working -
i wondering if me, im having bit of trouble radio button im implementing filters in site. special radio button css, here code:
/** radio buttons style **/ input[type=checkbox]:not(old), input[type=radio ]:not(old){ width : 2em; margin : 0; padding : 0; font-size : 1em; opacity : 0; } input[type=checkbox]:not(old) + label, input[type=radio ]:not(old) + label{ display : inline-block; margin-left : -2em; line-height : 1.5em; } input[type=checkbox]:not(old) + label > span, input[type=radio ]:not(old) + label > span{ display : inline-block; width : 0.875em; height : 0.875em; margin : 0.25em 0.5em 0.25em 0.25em; border : 0.0625em solid rgb(192,192,192); border-radius : 0.25em; background : rgb(224,224,224); background-image : -moz-linear-gradient(rgb(240,240,240),rgb(224,224,224)); background-image : -ms-linear-gradient(rgb(240,240,240),rgb(224,224,224)); background-image : -o-linear-gradient(rgb(240,240,240),rgb(224,224,224)); background-image : -webkit-linear-gradient(rgb(240,240,240),rgb(224,224,224)); background-image : linear-gradient(rgb(240,240,240),rgb(224,224,224)); vertical-align : bottom; } input[type=checkbox]:not(old):checked + label > span, input[type=radio ]:not(old):checked + label > span{ background-image : -moz-linear-gradient(rgb(224,224,224),rgb(240,240,240)); background-image : -ms-linear-gradient(rgb(224,224,224),rgb(240,240,240)); background-image : -o-linear-gradient(rgb(224,224,224),rgb(240,240,240)); background-image : -webkit-linear-gradient(rgb(224,224,224),rgb(240,240,240)); background-image : linear-gradient(rgb(224,224,224),rgb(240,240,240)); } input[type=checkbox]:not(old):checked + label > span:before{ content : '✓'; display : block; width : 1em; color : rgb(153,204,102); font-size : 0.875em; line-height : 1em; text-align : center; text-shadow : 0 0 0.0714em rgb(115,153,77); font-weight : bold; } input[type=radio]:not(old):checked + label > span > span{ display : block; width : 0.5em; height : 0.5em; margin : 0.125em; border : 0.0625em solid rgb(115,153,77); border-radius : 0.125em; background : rgb(153,204,102); background-image : -moz-linear-gradient(rgb(179,217,140),rgb(153,204,102)); background-image : -ms-linear-gradient(rgb(179,217,140),rgb(153,204,102)); background-image : -o-linear-gradient(rgb(179,217,140),rgb(153,204,102)); background-image : -webkit-linear-gradient(rgb(179,217,140),rgb(153,204,102)); background-image : linear-gradient(rgb(179,217,140),rgb(153,204,102)); } /** end radio buttons style **/ here html/liquid code on server side:
{% assign current_tags_dc = current_tags | downcase %} {% assign all_tags_dc = collection.all_tags | downcase %} <!-- heading --> <h2>marcas</h2> <!-- sidebar menu --> <ul class="clearfix filters list-unstyled my-list brand-list"> <!-- {% assign marcas_tags = current_tags | downcase %} {{ marcas_tags }} --> <li> <input class="coll-filter" id="marca-all" type="radio" name="marcas" value="" /> <label for="marca-all"><span><span></span></span> quitar selección</label> </li> {% product_vendor in collection.all_vendors %} {% assign tag = product_vendor | downcase %} {% if current_tags_dc contains tag %} <li> <input class="coll-filter" id="marca-{{ product_vendor | handle }}" type="radio" name="marcas" checked value="{{ product_vendor | handle }}" /> <label for="marca-{{ product_vendor | handle }}" class="checked"><span><span></span></span> {{ product_vendor }}</label> </li> {% elsif all_tags_dc contains tag %} <li> <input class="coll-filter" id="marca-{{ product_vendor | handle }}" type="radio" name="marcas" value="{{ product_vendor | handle }}" /> <label for="marca-{{ product_vendor | handle }}"> <span><span></span></span> {{ product_vendor }} </label> </li> {% endif %} {% endfor %} </ul> the problem radio input checked mark not appear when page reloaded filter out list. on image can see on code checked option on radio input, no mark on preview.
does have idea why might happening? can watch preview here:
http://bebe2go.myshopify.com/collections/panales-toallitas/aden-anais?preview_theme_id=143428481
if test other option in "marcas" mark show after reload filter products, in case of "aden + anais", "babysec" , options in other radio groups, radio not marked when collection page reloaded. if radio button has checked property. ideas why might happening? :p
thanks in advance.
well found out work around person helped me on facebook :p suggested since im working custom radio button css aim @ radio css .checked class instead of checked property on radio button. solution this:
label.checked > span > span{ display : block; width : 0.5em; height : 0.5em; margin : 0.125em; border : 0.0625em solid rgb(115,153,77); border-radius : 0.125em; background : rgb(153,204,102); background-image : -moz-linear-gradient(rgb(179,217,140),rgb(153,204,102)); background-image : -ms-linear-gradient(rgb(179,217,140),rgb(153,204,102)); background-image : -o-linear-gradient(rgb(179,217,140),rgb(153,204,102)); background-image : -webkit-linear-gradient(rgb(179,217,140),rgb(153,204,102)); background-image : linear-gradient(rgb(179,217,140),rgb(153,204,102)); } then have add class="checked" label checked radio , presto. bit of dirty solution cause allows css "select" 2 radio buttons. if select 1 option , select 1 after reload, both boxes shown selected. solution not affect functionality of multiple filters shopify collection im using, ill stay solution haha.
if knows why checked radio button not shown checked if has checked property, hear hypothesis haha.
if has questions ill happy :d
cheers!
Comments
Post a Comment