1

样本条件是

(type=text || type=password || type=search || type = tel) && readonly!=true && disabled!=true && 专注

例如，

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 & 5。我已经google了，但没有用。有谁能够帮我？

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

4

7 回答 7

8

您的答案是使用属性选择器和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 { /* ... */ }
于 2013-07-02T19:07:51.943 回答
0

对于您的确切条件(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 */
}

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

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+。

于 2013-07-02T19:13:59.737 回答
0

可能这可以帮助您：

input:enabled:not([readonly]):focus { background-color: red; }
于 2013-07-02T19:15:35.693 回答
0

你可以这样做：

input[type="text"], input[type="password"] {
  some css...
}
于 2013-07-02T19:03:21.693 回答
0

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

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

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

在 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;
}

使用级联来处理异常可以让你的选择器不那么冗长。

于 2013-07-02T19:05:04.257 回答
0

您可以使用type-selector 而不分配任何类型：

input[type] {
    background: red;
}

即使与querySelector/All

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

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

于 2013-07-02T19:06:08.807 回答
-2

仅使用 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];
   }

这是未经测试的代码，但它应该可以工作。

于 2013-07-02T19:19:56.783 回答