我只在输入为只读时尝试设置输入占位符属性的样式,但我似乎无法让两个选择器一起工作,这可能吗?我尝试了一些变体,但认为下面应该可以工作;
input:read-only + ::placeholder { color: black !important; }
...并确保最大的浏览器兼容性
input:read-only + ::-webkit-input-placeholder, input:read-only + ::placeholder, input:-moz-read-only + ::placeholder, input:read-only + ::-ms-input-placeholder { color: black !important; }
这些都不起作用,这可能吗?我哪里错了?
最佳答案
您可以使用以下解决方案:
input[readonly]::placeholder {
color: blue !important;
}
<input type="text" placeholder="Hey StackOverflow" readonly/>
<input type="text" placeholder="Hey StackOverflow"/>
浏览器兼容性/我可以使用吗?
为什么你的 CSS 规则不起作用?
用于格式化占位符的 CSS 规则尝试访问以下占位符(
<input>
元素后的占位符)。占位符位于 <input>
元素本身,所以你的规则不匹配。p + p {
color:blue;
}
<p>Hello</p>
<p>StackOverflow</p>
更多: Explanation of the
+
sign in CSS rules
关于css - 当输入为只读时设置输入占位符的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54329709/