似乎某些版本的默认
android浏览器有渲染问题.如果我创建一个页面,我有一些输入字段和一个按钮,当我禁用其他输入字段时,该按钮显示为灰色(除非这是在页面加载时完成,你必须点击/缩放一点到让浏览器重新渲染).
有趣的是,它不会将禁用的STYLE应用于按钮,而只是将其灰显.这是一个样本.
Link to editor jsfiddle
Link to embedded jsfiddle
CSS:
ul { list-style-type:none; }
.xxx {
background: blue;
color: white;
}
.xxx:disabled { background-color: red; }
HTML:
<div id="root">
<ul>
<li>
<input name="x" id="enable" class="x" type="radio">Enable</input>
</li>
<li>
<input name="x" id="disable" class="x" type="radio">disable</input>
</li>
</ul>
<input type="button" class="xxx" value="Button"></input>
</div>
JS:
$(function() {
$('.x:eq(0)').prop('disabled',true);
});
注意事项:
>该按钮未被禁用.点击它,它会暂时变为灰色.
>按钮的禁用状态有一种样式,将其背景颜色设置为红色(如果禁用该按钮,您将看到此工作),但该示例中的按钮不显示为红色,因此它甚至不仅仅呈现禁用状态样式.它似乎主要只是将不透明度设置为较低的值
>单选按钮之前的按钮不会受到影响. http://jsfiddle.net/YVFVZ/4/
任何想法如何解决这个问题?
解决方法
我终于弄明白了.我对这个解决方案并不满意,但似乎有效.
如果将输入包装在某个位置:relative元素,则可以解决问题.