CSSは

Question

私はCSSでさまざまなフォームフィールドをスタイリング上の問題を持っている

私は、CSSのコードがあります。今、このコードのスタイル（下）私が持っているすべての入力フィールド3

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

をだけでなく、スタイルの画像は、私はCSSを変更して作成し、私はそれでは

<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"> 

を持つボタンを提出：

#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スタイルを効果的に許可できますが、画像送信ボタンのスタイルを変更することはできません。

ありがとうございます！

Answer 1

はあなたの選択の一部として入力の種類を使用します。

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

これはattribute selectorです。

あなたは常に自分の入力ボックスのクラスを追加することができ

：

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

Answer 2

あなたはあなたのhtmlでみましょう。パスワードと.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"> 

Answer 3

はcss selectorsです：CSS selector for text input fields?。

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

Answer 4

あなたのテキストフィールド、ボタンフィールド

#form input[type=button] {} 

0の場合

#form input[type=text] {} 

パスワードフィールドの場合

#form input[type=password] {} 

について

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

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

Answer 5

あなたは入力にクラスを入れませんでしたか？ 。パスワードは、あなたが自分自身でinput要素のスタイルを設定しないでください。この

を行うが、その代わりにしたい要素のみをターゲット可能性があり、あなたのhtml

Answer 6

にクラス=「パスワード」を意味します。

まず、このCSS

#form input {/* styles here*/} 

を取り除く次に、この

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

コンマは2つの要素を分離しますが、それぞれにCSSを適用しません。

次に、画像送信ボタンで枠線を「リセット」する必要はありません。ところで

は、パスワードinputはあなたのコードではなくclassに応じidを持っているので、あなたは#代わりの.を必要としています。

Answer 7

FORM CSSで "入力"：

テキスト入力：

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 */ 

Answer 8

ちょうどあなたのCSSの2行目を削除し、パスワードのタイプ入力に "テキスト" クラスを追加します。 BELOW正しいバージョン：

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">