入力ボックスのCSS

私はCSSでさまざまなフォームフィールドをスタイリングする際に問題があります

私はCSSコードを持っています:

#form input {border: 1px solid #FFFFFF;font-size: 16px;padding: 5px;width: 200px;}

今このコードは、私が持っている3つの入力フィールド(以下)をスタイルするだけでなく、私が持っている画像送信ボタン

<input type="text" class="text" name="email" id="email">
<input type="password" value="" name="password" id="password">
<input name="button" type="image" src="go.jpg" alt="Submit" align="right">

だから、私はCSSを変更し、作成します:

#form input.text {border: 1px solid #FFFFFF;font-size: 16px;padding: 5px;width: 200px;}
#form input.button {border: 0px)

これにより、画像提出ボタンのCSSスタイル設定ができなくなりましたが、今ではパスワードフィールドのスタイルを設定していません。

#form input.text {border: 1px solid #FFFFFF;font-size: 16px;padding: 5px;width: 200px;}
#form input.password {border: 1px solid #FFFFFF;font-size: 16px;padding: 5px;width: 200px;}
#form input.button {border: 0px)

しかし、これは影響がありませんでした。

ですから、問題は、入力テキストと入力パスワードフィールドでCSSスタイルを効果的に許可することですが、画像送信ボタンのスタイルを変更することはできません。

前もって感謝します!

3
追加された 編集された
ビュー: 1
実際、入力タイプのボタンの最後の文字は ですが、} でなければなりません。
追加された 著者 Nicolás,

8 答え

調査する必要があるのは CSSセレクタです: CSSセレクタテキスト入力フィールドの場合は?

#form input[type="text"] {
    border: 1px solid #FFFFFF;
    font-size: 16px;
    padding: 5px;width: 200px;
}
#form input[type="password"] {
    border: 1px solid #FFFFFF;
    font-size: 16px;
    padding: 5px;
    width: 200px;
}
#form input[type="button"] {
    border: 0px;
}
1
追加された

追加できるオプションがあります

あなたのテキストフィールド

#form input[type=text] {}

あなたのパスワードフィールド

#form input[type=password] {}

あなたのボタンフィールド

#form input[type=button] {}

または、パスワードフィールドにパスワードを追加するだけです。

1
追加された

セレクタの一部として入力のタイプを使用します。

#form input[type="text"] {
    border: 1px solid #FFFFFF;
    font-size: 16px;
    padding: 5px;
    width: 200px;
}

これは属性セレクタです。

入力ボックスにクラスを追加するだけで、

<input type="text" class="styled" name="email" id="email">
<input type="password" value="" class="styled" name="password" id="password">

を使用して:

#form input.styled {
    border: 1px solid #FFFFFF;
    font-size: 16px;
    padding: 5px;
    width: 200px;
}
0
追加された

あなたはこれを行うことができます

input 要素を単独でスタイルするのではなく、必要な要素だけを対象とします。

まず、このCSSを取り除く

#form input {/* styles here*/}

次にこれを行う

#form input.text, #form input#password{
    border: 1px solid #FFFFFF;
    font-size: 16px;
    padding: 5px;
    width: 200px;
}

コンマは2つの要素を区切りますが、それぞれにCSSを適用します。

その後、画像送信ボタンで枠線を「リセット」する必要はありません。

ところで、パスワード inputclass ではなく、コードに応じて id の代わりに code>を使用します。

0
追加された

あなたのCSSの2行目を削除し、パスワードタイプの入力に "text"クラスを追加してください。下の正しいバージョン:

CSS:

#form input.text {border: 1px solid #FFFFFF;font-size: 16px;padding: 5px;width: 200px;}
#form input.button {border: 0px)

HTML:

<input type="text" class="text" name="email" id="email">
<input type="password" value="" name="password" id="password">
<input name="button" type="image" src="go.jpg" alt="Submit" align="right">
0
追加された

HTML上に.passwordクラスと.buttonクラスがありません。

<input type="text" class="text" name="email" id="email">
<input type="password" class="password" value="" name="password" id="password">
<input name="button" class="button" type="image" src="go.jpg" alt="Submit" align="right">
0
追加された

入力にクラスを入れなかったのですか? .passwordsはあなたのhtmlのclass = "password"を意味します

0
追加された

CSSの FORM「入力」:

テキスト入力:

input[type="text"] {...} /* normal (one row) text input */
textarea {...} /* multiline text input */
input[type="password"] {...} /* password masked input */

ボタン:

input[type="button"] {...}
input[type="submit"] {...} /* type of button - submitting the form */
input[type="reset"] {...} /* clean (reset) whole form "inputs" */

チェックボックス:

input[type="checkbox"] {...}

ラジオグループ:

input[type="radio"] {...}

ドロップダウンリスト:

select {...}
select optgroup{...} /* group od values in dropdown list */
select option{...} /* value to choose in dropdown list */
0
追加された