- PR -

ボタンのボーダー変更について

1|2 次のページへ»
投稿者投稿内容
T_Yu-ki
会議室デビュー日: 2006/10/11
投稿数: 4
投稿日時: 2006-10-11 14:58
VS.NET2003でASP.NETの開発をしております。

FORM内の入力エリアなどにフォーカスがあたった場合
そのFORM内にある最初のボタンにボーダー(枠？)が表示されますが
このボーダーをスタイルシートなど何らかの方法で表示させなくしたり
色を変えたりする事は可能でしょうか？

ボタンそのものがフォーカスされてる時などに表示される点線の
ボーダーではなく、その外側のボタンを囲むように表示される
ボーダーの事なのです。
(XPだと枠が出来るというよりボタン周りの色が変わるようです)

よろしくお願いします。
じゃんぬねっと
ぬし
会議室デビュー日: 2004/12/22
投稿数: 7811
お住まい・勤務地: 愛知県名古屋市
投稿日時: 2006-10-12 09:32
引用:

T_Yu-kiさんの書き込み (2006-10-11 14:58) より:

FORM内の入力エリアなどにフォーカスがあたった場合そのFORM内にある最初のボタンにボーダー(枠？)が表示されますがこのボーダーをスタイルシートなど何らかの方法で表示させなくしたり色を変えたりする事は可能でしょうか？

ボタンそのものがフォーカスされてる時などに表示される点線のボーダーではなく、その外側のボタンを囲むように表示されるボーダーの事なのです。

outline のことではないようですね。

Submit ボタンの概観が変わるかどうかはブラウザに依存します。
CSS でどうこうはできないと思います。

_________________
C# と VB.NET の入門サイト
じゃんぬねっと日誌
ぽぴ王子
ぬし
会議室デビュー日: 2006/03/24
投稿数: 475
お住まい・勤務地: お住まい:城・勤務地:城
投稿日時: 2006-10-12 16:33
こんにちは。

引用:

ひろ@yaさんの書き込み (2006-10-12 16:01) より:

CSSに一応あります。

どうも、すでにじゃんぬさんによって否定されているようですが

引用:

じゃんぬねっとさんの書き込み (2006-10-12 09:32) より:

outline のことではないようですね。

私も outline とは違うような気がします。
手元の Firefox と Opera 9 で見てみたところ対応しているようですが、フォー
カスが当たっているいないに関わらず変化しているようですし。

引用:

ただし、ブラウザが対応しているか知りません。
（IE6が対応していなくて使うのをやめた様な気がしますが）

IE6 は対応していないようですね（ IE7 はどうかな）。

「CSS でどうこうはできない」に一票…でしょうか。
_________________
ぽぴ王子＠わんくま同盟
ぽぴ王子の人生プログラミング中 / ぽぴンち。
ぶさいくろう
ぬし
会議室デビュー日: 2005/11/22
投稿数: 1232
お住まい・勤務地: 川崎市（は俺も含めてロクな人間が住んでないよｗ）
投稿日時: 2006-10-12 17:49
投稿が消えてるからわかんないね。
ぽぴ王子
ぬし
会議室デビュー日: 2006/03/24
投稿数: 475
お住まい・勤務地: お住まい:城・勤務地:城
投稿日時: 2006-10-12 17:59
むむむ、確かに消されてしまったようですね。

元の投稿に書かれていたサイトは結構勉強になりそうだったので、それはそれと
して残しておいて欲しかっただけに。
ちょっと残念。 ○|￣|＿
T_Yu-ki
会議室デビュー日: 2006/10/11
投稿数: 4
投稿日時: 2006-10-14 05:29
皆様レスありがとうございます。

outline試してみましたが、やはり思うような表示にはなりませんね。
CSSのサイトや本などを見回ってみましたが、やはり皆様がおっしゃる
ように「CSSでどうこうはできない」と私も思うようになりました。

それで、皆様にお聞きするだけでは申し訳ないと思い、自分でも可能
な限りの努力はしようと色々と試していたため返事が遅くなり申し訳
ございません。

結果的に、かなり強引な方法ではあると私自身も感じておりますが、
そのような表示にする方法があったので、同様の事で悩まれた方のため
参考までにその方法を簡単に書かせていただきます。

1.まず<META HTTP-EQUIV="MSThemeCompatible" Content="No">を指定します。
　これでXPのIEでも旧スタイルで表示されます。

2.ボタンの位置固定のためボタンをTABLEで囲みCELLPADDING、CELLSPACING、
　BORDER全て0にしました(完全にレイアウト用のTABLEです)
　TABLEではなくDIV等でも出来るだろうとは思いますが試作のため簡単に
　TABLEを使いました。

3.その状態で画面を表示してフォーカスがあたってない状態でハードコピー
　を取り、ボタンの部分だけを切り抜き画像とします。

4.CSSなどでその画像をTABLEの背景画像に設定します。

5.TABLEのTDにALIGN=CENTER、VALIGN=MIDDLEを設定して中心部分に表示される
　ようにして、ボタンのサイズ(WIDTH、HEIGHT)を少し小さめに設定し直します。

6.CSSでボタンのボーダーを消します。


こうすればボタンにボーダーは無いので外枠は表示されなくなります。また、
ボーダー無しだとボタンの立体感がなくなりますが、ボタンを少し小さくして
中心に表示させてるのでボタン周辺部分だけ背景画像が見える事により、見た
目は通常のボタンのように見えます。

ただ、この状態だと本当にボタンにフォーカスがあたった場合でも枠が表示
されない事になりますが、それはボタンのOnFocusなどでボタンの大きさ等を
JavaScriptで元に戻させるか、フォーカス有りの背景画像も別に作っておいて
CSSかJavaScriptで変えさせれば、たぶん大丈夫だと思います。


ものすごく強引な方法だとは私も思いますが「CSSでどうこうはできない」事
だと私も思いましたので「いかなる手段を使ってでもそういう表示にしたい」
と思われる方がおられましたら、そのご参考になればと思います。

じゃんぬねっと
ぬし
会議室デビュー日: 2004/12/22
投稿数: 7811
お住まい・勤務地: 愛知県名古屋市
投稿日時: 2006-10-14 08:47
JavaScript で良いのであれば、<form> 要素内の onfocus に blur(); を仕込めば可能かもしれません。
しかし、入力フィールド領域がある場合は、この方法では如何ともし難いですね。

個人的には、Internet Explorer のアクセシビリティ的な要素なので、そのままで良いとは思いますが。

_________________
C# と VB.NET の入門サイト
じゃんぬねっと日誌
ant
ベテラン
会議室デビュー日: 2002/07/11
投稿数: 51
投稿日時: 2006-10-14 10:17
<input type="button">にする
1|2 次のページへ»

スキルアップ／キャリアアップ（JOB@IT）