Opera9 input type="button"のvalue値の消し方

ハイレベルCSS実践講座 東京2008年1月20日 | サイバーガーデンbizに行ってきました。
どんな感じかはbizを見ていただくとして。

内容としては、いちおう大半が復習で、やっべ全然知らない。。。っていう状況はほとんど無かったんですけど、Operaでinput type="button"のvalue値の消し方が知らなくってやるせない気持ちだったのですが、参加者の方もあんまり知ってる人は居ないと思われたので、世間の認知度もあんまり無いのかな？

ボクの場合、今までinput type="image" でやってたので、こういう状況になった事が無かったんですよ。えぇ。

まぁ言い訳はいいとして、そんな訳で、方法をば。

---- こっから続き

こんな感じで、ボタンがあるとして。

サンプルなのに入力フィールドがあるのは、入力フィールドが横に無いと、IE7でtext-indent使ってvalue値を画面外に飛ばした場合、backgroundも見えなくなってしまうバグ？が発生するのを回避するために。
とはいえ、本来セットでしかるべきな要素なんで、このバグにあたるって事は無いかと思いますが。（サンプル作ってて消えたからびびった…）

IE7（6も？）でコレ↓見ると、何も見えないかと。

XHTMLソースは、以下のように。

<input type="button" value="検索" class="OperaTextHiddenTest"  />

コレに当てている、スタイルはこんな感じです。

#contents #main .entryBody .OperaTextHiddenTest2,
#contents #main .entryBody .OperaTextHiddenTest {
	width: 38px;
	height: 25px;
	background: url(../img/share/btn_search.gif) no-repeat center center;
	text-indent: -9999px;
	cursor: pointer;
}

Opera以外のブラウザはtext-indent: -9999px;とかで消える（見えなくなる）ので、OKですが、Operaの場合はコレだと言う事を聞いてくれません。
そこで使うのが、padding-top or padding-bottomプロパティです。

;;body #contents #main .entryBody .OperaTextHiddenTest2 {
	padding-top: 50px;
}

;;bodyってのは、普通に指定するとFirefoxなどにも反映されてしまうので、Opera9でも使えるハックを使ってます。（最新の9.25でも使えた。他のはダメっぽい感じ。）

とりあえず、今回はpadding-top: 50px;にしてみました。
すると以下のようにOperaでもvalue値の「検索」部分が消えるのが確認できるかと思います。

あと、ボタンなのにカーソルが指にならないから、「cursor: pointer;」の指定も忘れずにやってあげると親切だと思います。
アレよりウェブサイトのが、よっぽど半分は優しさで出来てると思うよ！！
こういう小さな事かも知れないけど、ほんのちょっとの優しさが、より多くの人が使いやすいサイトになると思うんだ。

にしても、益子さんは、ネガティブマージンが大好きだったとは知らなかった。

ちょっと追記（ハックに関して）

今回使ったハックは、W3C CSS validator でValidにならないハックなんで、そういうのNGっていう人は、こういう方法を使わないか、input type="image"でやるのが良いかと思います。

個人的な意見としては、状況によっては使って良いと思う。
回避出来るのに、とりあえずハック！みたいなのはどうかと思いますけど、現状の手段として出来ることがソレしかないなら、Validに拘り過ぎる必要もあまりないんじゃないかなぁと。

とかいいつつも、ボクもかなりValidにこだわるので、基本的にそういった類のハックは使いませんが、業務の場合だったら時間も限られてますし、Validに出来ないからこのデザインは再現出来ないとかは、ちょっと違うかなと。
さらに、ユーザーの視点から見たらハックの有無は関係ないので、プロジェクトの関係者が使ってるって事が分かるようになってればいいんだと思います。

各種SBMに追加

• 
• 
• 
• 
• 
• 
• 
•