如何选择同时具备disabled属性和其他自定义附加属性的禁用input元素

你可以直接在现有选择器后拼接属性存在选择器 [greyed-out] 即可，完整选择器写法如下：
input[type="checkbox"]:disabled[greyed-out]

规则说明 #

• CSS 支持多个选择规则叠加使用，连续书写多个筛选条件时，只有同时满足所有条件的元素才会被匹配命中
• [greyed-out] 属于属性存在选择器，只要元素上携带了该属性，无论它有没有设置具体的属性值，都会被该规则匹配
• 如果你需要匹配 greyed-out 属性为特定值的元素（比如 <input type="checkbox" disabled greyed-out="true" />），可以修改为属性值匹配写法：
  input[type="checkbox"]:disabled[greyed-out="true"]

使用示例 #

/* 给符合条件的复选框设置特殊样式 */
input[type="checkbox"]:disabled[greyed-out] {
  opacity: 0.4;
  filter: grayscale(100%);
  pointer-events: none;
}

内容的提问来源于stack exchange，提问作者peckoski