根据收音机更改 css:checked 属性在 safari 中不起作用 [英] Changing css depending on radio:checked property not working in safari

问题描述

为什么这在 safari 中不起作用，但在 chrome 和 firefox 中有效?

http://jsfiddle.net/1ze83qcc/

只需点击单选按钮，如果您点击登录，它应该显示 div.

.form-list .login-mobile{显示:无；}.form-list #login-drop:checked + label + .login-mobile{显示:块；}

<li style="margin:5px 0;padding:0;"><input id="login-drop" type="radio" name="checkout_method" selected="false"><label for="login-drop">登录</label><div class="login-mobile">嘿，你

<li style="margin:5px 0;padding:0;"><input id="login:register" type="radio" checked="checked" value="register" name="checkout_method" selected="false"><label for="login:register">注册</label><li style="margin:5px 0;padding:0;"><input id="login:guest" type="radio" value="guest" name="checkout_method" selected="true"><label for="login:guest">以访客身份结帐</label>

解决方案

好吧，safari 似乎有一个关于相邻兄弟选择器的错误:element + element + element{}.

所以我使用了兄弟组合~

.form-list #login-drop:checked ~ .login-mobile{显示:块；}

它奏效了.

Why is this not working in safari but works in chrome and firefox?

http://jsfiddle.net/1ze83qcc/

Just click on the radio buttons and if you click login it should show the div.

.form-list .login-mobile{
	display:none;
}
.form-list #login-drop:checked + label + .login-mobile{
	display:block;
}

<ul class="form-list">
<li style="margin:5px 0;padding:0;">
<input id="login-drop" type="radio" name="checkout_method" selected="false">
<label for="login-drop">Login</label>
<div class="login-mobile">
    hey you
</div>
    
</li>
<li style="margin:5px 0;padding:0;">
<input id="login:register" type="radio" checked="checked" value="register" name="checkout_method" selected="false">
<label for="login:register">Register</label>
</li>
<li style="margin:5px 0;padding:0;">
<input id="login:guest" type="radio" value="guest" name="checkout_method" selected="true">
<label for="login:guest">Checkout as Guest</label>
</li>
</ul>

解决方案

Ok, safari seems to have a bug regarding adjacent sibling selectors: element + element + element{}.

So I've used the sibling combinator ~

.form-list #login-drop:checked ~ .login-mobile{
    display:block;
}

and it worked.

这篇关于根据收音机更改 css:checked 属性在 safari 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！