Inc*_*tly 80 html css iphone safari webkit
下面的简单HTML在Firefox和基于WebKit的浏览器中显示不同(我在Safari,Chrome和iPhone中检查过).
在Firefox中,边框和文本都具有相同的颜色(#880000
),但在Safari中,文本变得更轻(就好像它应用了一些透明度).
我可以以某种方式解决此问题(在Safari中删除此透明度)?
更新:
谢谢你的回答.我不再需要这个用于我的工作(而不是禁用我input
用样式div
元素替换元素),但我仍然好奇为什么会发生这种情况,如果有任何方法可以控制这种行为......
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
input:disabled{
border:solid 1px #880000;
background-color:#ffffff;
color:#880000;
}
</style>
</head>
<body>
<form action="">
<input type="text" value="disabled input box" disabled="disabled"/>
</form>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
小智 197
-webkit-text-fill-color: #880000;
opacity: 1; /* required on iOS */
Run Code Online (Sandbox Code Playgroud)
lij*_*nma 42
电话和平板电脑webkit浏览器(Safari和Chrome)和桌面IE对已禁用的表单元素进行了许多默认更改,如果要为禁用的输入设置样式,则需要覆盖这些元素.
-webkit-text-fill-color:#880000; /* Override iOS / Android font color change */
-webkit-opacity:1; /* Override iOS opacity change affecting text & background color */
color:#880000; /* Override IE font color change */
Run Code Online (Sandbox Code Playgroud)
pau*_*ol. 10
2021 年更新:
将此页面的想法组合成“设置并忘记”重置,使所有禁用的文本与普通文本相同。
input:disabled, textarea:disabled, input:disabled::placeholder, textarea:disabled::placeholder {
-webkit-text-fill-color: currentcolor; /* 1. sets text fill to current `color` for safari */
opacity: 1; /* 2. correct opacity on iOS */
}
Run Code Online (Sandbox Code Playgroud)
这是一个有趣的问题,我已经尝试了很多覆盖,看看我是否可以实现它,但没有任何工作.现代浏览器实际上使用他们自己的样式表来告诉元素如何显示,所以也许你可以嗅出Chrome的样式表,你可以看到他们强迫它的样式.我会对结果非常感兴趣,如果你没有,我会花一点时间自己寻找它,因为我有时间浪费.
仅供参考,
opacity: 1!important;
Run Code Online (Sandbox Code Playgroud)
不会覆盖它,所以我不确定它是不透明的.
您可以使用readonly属性而不是disabled属性,但是您将需要添加一个类,因为没有伪类input:readonly。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
button.readonly{
border:solid 1px #880000;
background-color:#ffffff;
color:#880000;
}
</style>
</head>
<body>
<form action="">
<button type="button" readonly="readonly" class="readonly">disabled input box</button>
</form>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
请注意,禁用输入和只读输入并不相同。只读输入可以具有焦点,并将在提交时发送值。看看w3.org
对于@ryan
我希望我的禁用输入框看起来像一个正常的输入框。这是唯一可以在 Safari Mobile 中使用的东西。
-webkit-text-fill-color: rgba(0, 0, 0, 1);
-webkit-opacity: 1;
background: white;
Run Code Online (Sandbox Code Playgroud)
归档时间: |
|
查看次数: |
67240 次 |
最近记录: |