- PR -

DropDownListとスタイルシート

投稿者投稿内容
Furi2
ベテラン
会議室デビュー日: 2004/10/28
投稿数: 74
お住まい・勤務地: N.Hollywood/Agoura Hills
投稿日時: 2006-07-07 07:00
お世話になります。初歩的な質問ですみません。

スタイルシートが、TextBoxやLabelには適用されるのですが、DropDownListに適用されません。以下のように設定するのですが、DropDownListはディフォルトの外観のままです。どのようにスタイルシートと連結すればよいのでしょうか??


//aspxファイル

<asp:TextBox ID="txt1" runat="server" CssClass="TextBox" />
<asp:DropDownList ID="ddl1" runat="server" CssClass="DropDown" />


//スタイルシート

.TextBox
{
background-color: #FBFBFF;
border-color: #AAAAAA;
border-style: solid;
border-width: 1px;
}

.DropDown
{
background-color: #FBFBFF;
border-color: #AAAAAA;
border-style: solid;
border-width: 1px;
}
mio
ぬし
会議室デビュー日: 2005/08/25
投稿数: 734
お住まい・勤務地: 神奈川県
投稿日時: 2006-07-07 09:37
<select>には、borderスタイルやz-indexは適用できないです。
IEの独自コンポーネントではないからのようで、たぶんIE7では可能。
代替案としては、<input>と<input type="button">と<table>を使って擬似的なドロップダウンを作るしかないような。
ぽぴ王子
ぬし
会議室デビュー日: 2006/03/24
投稿数: 475
お住まい・勤務地: お住まい:城・勤務地:城
投稿日時: 2006-07-07 10:12
こんにちは。

引用:

mioさんの書き込み (2006-07-07 09:37) より:

<select>には、borderスタイルやz-indexは適用できないです。
IEの独自コンポーネントではないからのようで、たぶんIE7では可能。


IE の独自コンポーネントかどうかはあまり関係ないような気がします。
こちらにあるように、単に IE5.x/6.0 のバグ(というか仕様?)でしょうね。
静的 HTML で試してみましたが、Firefox と Opera9 では正しく border は適用され
ていました。
解決方法としては DropDownList を <span> でくくって、それにスタイルシートを適
用してみるとか。ちょっと無理やりですが。
じゃんぬねっと
ぬし
会議室デビュー日: 2004/12/22
投稿数: 7811
お住まい・勤務地: 愛知県名古屋市
投稿日時: 2006-07-07 10:52
引用:

ぽぴ王子さんの書き込み (2006-07-07 10:12) より:

解決方法としては DropDownList を <span> でくくって、それにスタイルシートを適
用してみるとか。ちょっと無理やりですが。


これですと、<SELECT> 要素自体の溝が消えないですよね。
それと、IE は溝が消えないものの線は引けますが、FireFox では被ってしまうと思います。(多分)

_________________
C# と VB.NET の入門サイト
じゃんぬねっと日誌
ぽぴ王子
ぬし
会議室デビュー日: 2006/03/24
投稿数: 475
お住まい・勤務地: お住まい:城・勤務地:城
投稿日時: 2006-07-07 11:02
調べてみました。

確かに溝は消えないし Firefox だと被っちゃうし、やっぱり思いつきで言うのは控える
べきでしたね。すいません。

やっぱり mio さんの代替案しかないでしょうか。

# 自分だったら「あきらめようぜ、な!」で済ませてしまいそうです
ぶさいくろう
ぬし
会議室デビュー日: 2005/11/22
投稿数: 1232
お住まい・勤務地: 川崎市(は俺も含めてロクな人間が住んでないよw)
投稿日時: 2006-07-07 11:21
これはIE6までの仕様なんだ。
あきらめようぜ。な!
Furi2
ベテラン
会議室デビュー日: 2004/10/28
投稿数: 74
お住まい・勤務地: N.Hollywood/Agoura Hills
投稿日時: 2006-07-07 11:44
mioさん、ぽぴ太郎さん、じゃんぬねっとさん、ぶさいくろうさん、どうもありがとうございます。

そうなんですか、IEの仕様なんですね。何かわたしが間違ったことしているのか、何かテクがあるのに見つけられないでいるのか、わからなかったので、これで気持ちよくあきらめがつきました(笑)。

ただ、Borderだけならまだいいのですが、最近ASP.NETを1.1から2.0にしたのですが、1.1では綺麗に揃っていたTextBoxとDropDownListの幅(例えば両方Width="200")が、2.0ではTextBoxが長めなのか、DropDownListが短めなのか、ガタガタしてしまって、どうも気持ちが悪いのです。これも皆様経験されてらっしゃることすか?それともこれは私が何か見落としていると思われますか?ご意見伺えればありがたく思います。
べる
ぬし
会議室デビュー日: 2003/09/20
投稿数: 1093
投稿日時: 2006-07-07 13:06
引用:
Furi2さんの書き込み (2006-07-07 11:44) より:

ただ、Borderだけならまだいいのですが、最近ASP.NETを1.1から2.0にしたのですが、1.1では綺麗に揃っていたTextBoxとDropDownListの幅(例えば両方Width="200")が、2.0ではTextBoxが長めなのか、DropDownListが短めなのか、ガタガタしてしまって、どうも気持ちが悪いのです。これも皆様経験されてらっしゃることすか?それともこれは私が何か見落としていると思われますか?ご意見伺えればありがたく思います。

2.0だからじゃなくて、DOCTYPE宣言があるとそうなるみたいですね。

スキルアップ/キャリアアップ(JOB@IT)