- 締切済み
CSSでinput type="text"の要素にbackgroundを設定するとborderstyleが変更される
質問させてください。 テキスト入力ボックスに背景画像をいれたWEB入力フォームを作ろうとしています。背景の設定自体は出来たのですが、背景を設定するとborderスタイがwindows2000風の窪んだデザインに変更されてしまいます。border-styleもあわせて指定しておくという方法もあるとは思いますが、初期のborderスタイルを維持して背景のみ設定するにはどうすればよいのでしょうか？ ------------------------------------------------- <html> <head> <style> .hoge3{ padding-left:17px; background-color:url(web.gif) no-repeat left center; /*枠線はそれぞれの環境の初期デザインを適用したい border:solid 1px #7F9DB9; */ } </style> </head> <body> <form> <input type="text" class="hoge3" value=""/> </form> </body> </html> ------------------------------------------------- よろしくお願いします。
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
質問の意図がつかめないのですが？？ ＞初期のborderスタイルを維持して背景のみ設定するにはどうすればよいのでしょうか？ 質問1 背景が設定されると、borderは明示されるのがデフォルトのはず。・・それが初期状態・・画像でなく色・・それがtransparentであってもが指定されるとinsetのborderが表示されるはずですから、この質問は Q:初期(デフォルト)のスタイルをキャンセルしてborderを任意のスタイルにしたいのだが、borderを指定せずに、その方法は というへんな質問になります。 質問2 もう一点、なぜclassがあるの？？classなんてなくてもinputには必ずid(もしくはname)がつくはずなので、それで指定するほうがよいと思うけど・・無駄なclassを書くのはいかがかと <style type="text/css"> <!-- input,select,optgroup,option,button,textarea{ border:solid skyblue 1px; } form input{ /* 詳細度を高くしてあるので上記指定と順不同 */ background:transparent url("./web.gif") no-repeat left center; } --> </style> </head> <body> <h1>title</h1> <h2>subTitle</h2> <form action="./"> <input type="text" value="" id="abc"> </form> </body> </html>
- steel_gray
- ベストアンサー率66% (1052/1578)
ブラウザのデフォルトのデザインは枠や中身を個別に指定できるようなものではないので、 ＞初期のborderスタイルを維持して背景のみ設定 これはできないようです。
お礼
回答ありがとうございます。 デフォルトデザインを変更して 「デフォルトとは違う特殊な入力フォーム」 であることを主張できるようなデザインも あわせて検討してみます。
補足
>質問1 >Q:初期(デフォルト)のスタイルをキャンセルして >borderを任意のスタイルにしたいのだが、borderを指定せずに、その方法は >というへんな質問になります。 backgroundの初期(デフォルト)のスタイルをキャンセルして任意のスタイルにし、borderは初期(デフォルト)のままにしたいという意味でした。 >質問2 >もう一点、なぜclassがあるの？？ 書いたソースではinputは一つですが、実際に使用する際には 変更するinput要素としないものが混在するからです。 かつ、変更するinput要素はひとつとは限りません。 checkboxもある場合があります。 いずれにしても検証用のソースなのでこのまま使うわけではありません。