Question

样本条件

（type = text || type = password || type = search || type = tel）＆amp;＆amp; readonly！= true＆amp;＆amp;禁用！= true＆amp;＆amp;聚焦

例如，

1.<input type="text"></input>
2.<input type="password"></input>
3.<input type="search"></input>
4.<input type="text" readonly></input>
5.<input type="password" disabled></input>

只选择 1,2,3 ， 4＆amp;不应选择5 。我已经谷歌搜索，但没有用。有人可以帮助我吗？

（不使用像jquery这样的任何js库）

Answer 1

您的答案是使用属性选择器和not选择器以及:focus选择器的组合。

这是一个JsFiddle和下面的CSS：http://jsfiddle.net/rgthree/bdb63/

input[type="text"]:not([readonly]):not([disabled]):focus,
input[type="password"]:not([readonly]):not([disabled]):focus,
input[type="search"]:not([readonly]):not([disabled]):focus,
input[type="tel"]:not([readonly]):not([disabled]):focus { /* ... */ }

但是，根据您的表单，您可能会发现在单个规则中将所有输入而不是设置为特定类型的方式更容易。类似的东西：

input:not([type="checkbox"]):not([type="radio"]):not([readonly]):not([disabled]):focus { /* ... */ }

Answer 2

你可以这样做：

input[type="text"], input[type="password"] {
  some css...
}

Answer 3

您可以检查属性是否存在而不是值，然后使用级联来处理异常。

input[type] {
    border: 1px solid green;
}

input[readonly] {
    border: 1px solid red;
}

Example running on JSFiddle

评论更新：这应该完全符合您的要求。

input[type=text], input[type=password], input[type=search], input[type=tel] {
    border: 1px solid green;
}

input[readonly], input[disabled] {
    border: 1px solid red;
}

使用级联来处理异常会使您的选择器更加冗长。

Answer 4

您可以使用type - 选择器而不指定任何类型：

input[type] {
    background: red;
}

即使使用querySelector/All

也可以使用

document.querySelector('input[type]').className = 'foo';

http://fiddle.jshell.net/59kk3/

Answer 5

完全符合(type=text || type=password || type=search || type = tel) && readonly!=true && disabled!=true：

的条件

input[type="text"]:enabled:read-write,
input[type="password"]:enabled:read-write,
input[type="search"]:enabled:read-write,
input[type="tel"]:enabled:read-write {
    /* your styles here */
}

请注意，Internet Explorer尚不支持:read-write伪元素，因此您也可以这样做：

input[type="text"]:not([readonly]):enabled,
input[type="password"]:not([readonly]):enabled,
input[type="search"]:not([readonly]):enabled,
input[type="tel"]:not([readonly]):enabled {
    /* your styles here */
}

从理论上讲，这应该适用于所有现代浏览器和IE 9 +。

Answer 6

可能这可以帮助你：

input:enabled:not([readonly]):focus { background-color: red; }

Answer 7

仅使用vanilla JS，您必须获取所有输入元素，然后遍历数组以选择所需的项目。像这样：

    var result;
    var elements = document.getElementsByTagName("input");
    for (var i=0; i < elements.length; i++){
       var readonly = elements[i].hasOwnProperty("readonly");
       var disabled = elements[i].hasOwnProperty("disabled");
       if ((elements[i].type == "text"  || elements[i].type == "password") && !readonly && !disabled){
      result.push(elements[i];
   }

这是未经测试的代码，但应该可以使用。

如何使用CSS选择器选择元素谁的属性可以有多个值

7 个答案: