フォーム関連のCSS

[上に] [前に] [次に]
俊輔 1999/12/20(月) 00:38:04
INPUT,TEXTAREA,SELECT {
color: #333333; background-color: #ffffcc;
border-bottom: #990000 2px solid; border-left: #990000 2px solid;
border-right: #990000 2px solid; border-top: #990000 2px solid;
}
のような感じでスタイルシートを指定すると
ボタン、テキストエリア等には全て反映されますが、
ラジオボタン、セレクトメニューには border の
指定が反映されません。
IEでの話しですがラジオボタン、セレクトメニューには
この指定は無効なのでしょうか?
書き方によって指定出来るのであれば教えて下さい、
よろしくお願いします。

俊輔 1999/12/26(日) 23:17:39
すみません、どなたか分かりませんでしょうか?
無理なら無理で納得はするのですが、何か方法が
あればと思って。。。

YUFU [E-Mail] [HomePage] 1999/12/26(日) 23:23:45
私が試した限りでは、不可能でした。
# すみません。こんな回答で……。

sinisa 1999/12/27(月) 02:18:57
CSS
.form { color:#333333; background-color:#ffffcc; }
SELECT
<select name="hoge" class="form">
これでどう?

俊輔 1999/12/27(月) 02:44:02
YUHUさん、sinisaさん、ありがとうございます。

>sinisaさん
はい、それで背景色、フォント色は出来ます。

が、テキストエリア、ボタン等では
border-bottom: #990000 2px solid;
な感じで枠線を付けれますよね。
でも、それがセレクトメニューやラジオボタンでは
出来ないのかな?、って質問なんです。

なにか方法があれば、よろしくお願いします。

のぐ 1999/12/27(月) 23:12:18
SELECT には border と margin は使えません。レファレンスに記載がありませんでした。その他は使えました。ラジオボタンにも border は有効です。
<html>
<head>
<style type="text/css">
<!--
INPUT,TEXTAREA,SELECT,OPTION {
color:#00ff00;
background-color:#ff0000;
border:5 solid #0000ff;
margin:5 5 5 5;
padding:5 5 5 5;
}
-->
</style>
</head>
<body>
<form>
<input type="text" name="text1" value="abc"><BR>
<input type="password" name="password1" value="abc"><BR>
<input type="button" name="button1" value="abc"><BR>
<input type="checkbox" name="checkbox1" value="abc">abc<BR>
<input type="radio" name="radio1" value="abc">abc<BR>
<input type="image" name="image1" value="abc">abc<BR>
<input type="reset" name="reset1" value="abc">abc<BR>
<input type="submit" name="submit1" value="abc">abc<BR>
<input type="file" name="file1" value="abc">abc<BR>
<textarea name="textarea1" cols="10" rows="10">abc</textarea><BR>
<select name="select1" size="5">
<option value="1">abc</option>
<option value="2">def</option>
<option value="3">ghi</option>
</select><BR>
</form>
</body>
</html>

俊輔 1999/12/29(水) 01:35:13
[[解決]]
のぐさん、ありがとうございます。
おおお、確かにラジオボタンにもボーダーが効きますね。
...やっぱり、丸はおかしな感じだけど(^^;;;
どうも、いろいろとありがとうございました。

[上に] [前に] [次に]