css - 当输入为只读时设置输入占位符的样式

标签 css css-selectors

我只在输入为只读时尝试设置输入占位符属性的样式,但我似乎无法让两个选择器一起工作,这可能吗?我尝试了一些变体,但认为下面应该可以工作;

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"/>



浏览器兼容性/我可以使用吗?
  • https://caniuse.com/#feat=css-placeholder
  • https://caniuse.com/#feat=css-read-only-write


  • 为什么你的 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/

    相关文章:

    css - 使用 CSS @media 查询目标移动设备分辨率的最准确方法是什么?

    选择前面的兄弟元素的 CSS 选择器

    css - .container.\31 25\25 在 CSS 中是什么意思?

    html - 如何删除在移动菜单上使用 Twitter Bootstrap 时出现的水平滚动条

    javascript - Ext JS 如何实现全屏最大化窗口显示?

    javascript - 在相同高度对齐来自不同父 div 的 div

    html - 设置 div 高度以填充剩余高度

    CSS 在 <li> 中定位 <a> 标签

    javascript - 使用 JQuery Sortable 插件防止表格的标题可排序

    将 ~(代字号)与逗号一起使用时的 CSS 意外行为