7

CSS3 を使用して、 、、、または のタグの属性を持たないすべての入力関連要素を選択する方法はありますか? これは私がこれまでに得たものです：typebuttonresetsubmitbutton

input:not([type="submit"]),
textarea {

    /* ... */

}

input:not([type="submit"]):focus,
textarea:focus {

    /* ... */

}

input:not([type="submit"]):hover,
textarea:hover {

    /* ... */

}

...しかし、それは可能な限り普遍的ではありません。入力関連のフィールドだけにいくつかの素晴らしい新しいトランジションを適用したいと考えています。これらの特定のスタイルがページ上の任意のボタンに適用されると、奇妙に見え始めます。どんな助けでも大歓迎です。

4

2 に答える 2

19

複数の:notセレクターを連結するだけです。

/* Fields */
input:not([type=button]):not([type=reset]):not([type=submit]):not([type=image]),
textarea {
  outline: 3px solid green;
}

/* Buttons */
input[type=button],
input[type=reset],
input[type=submit],
input[type=image],
button {
  outline: 3px solid red;
}

/* Both */
input,
button,
textarea {
  margin: 6px;
}
<h1>Form elements</h1>
<p>Buttons should be outlined in red, fields in green.</p>
<button>Button</button>
<input type="button" value="Input Button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image" src="//placehold.it/100x40/ffff00/0000ff/?text=foo">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">
<textarea></textarea>

于 2012-05-31T17:00:40.407 に答える
-2

弾丸を噛んでこれを行う必要があると思います：

input[type=text],input[type=password],input[type=url],input[type=email],textarea,select{
    /* css */
}
input[type=text]:focus,input[type=password]:focus,input[type=url]:focus,input[type=email]:focus,textarea:focus,select:focus{
    /* css */
}
input[type=text]:hover,input[type=password]:hover,input[type=url]:hover,input[type=email]:hover,textarea:hover,select:hover{
    /* css */
}

単に CSS に and 機能がないため、後続の s は他の s:not()をキャンセルします:not()

于 2012-05-31T16:55:49.287 に答える