CSSでinput type="text"の要素にbackgroundを設定するとborderstyleが変更される

締切済

質問者：hogemax
質問日時：2009/02/26 11:06
回答数：2件

質問させてください。
テキスト入力ボックスに背景画像をいれた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件)

最新から表示
回答順に表示

No.2

回答者： ORUKA1951
回答日時：2009/02/27 00:02

質問の意図がつかめないのですが？？

＞初期のborderスタイルを維持して背景のみ設定するにはどうすればよいのでしょうか？

質問1
　背景が設定されると、borderは明示されるのがデフォルトのはず。・・それが初期状態・・画像でなく色・・それがtransparentであってもが指定されるとinsetのborderが表示されるはずですから、この質問は

Q:初期(デフォルト)のスタイルをキャンセルしてborderを任意のスタイルにしたいのだが、borderを指定せずに、その方法は
　というへんな質問になります。

質問2
　もう一点、なぜclassがあるの？？classなんてなくてもinputには必ずid(もしくはname)がつくはずなので、それで指定するほうがよいと思うけど・・無駄なclassを書くのはいかがかと

<style type="text/css">

</style>
</head>
<body>
<h1>title</h1>
<h2>subTitle</h2>
<form action="./">
<input type="text" value="" id="abc">
</form>
</body>
</html>

この回答への補足

>質問1
>Q:初期(デフォルト)のスタイルをキャンセルして
>borderを任意のスタイルにしたいのだが、borderを指定せずに、その方法は
>というへんな質問になります。
backgroundの初期(デフォルト)のスタイルをキャンセルして任意のスタイルにし、borderは初期(デフォルト)のままにしたいという意味でした。

>質問2
>もう一点、なぜclassがあるの？？
書いたソースではinputは一つですが、実際に使用する際には
変更するinput要素としないものが混在するからです。
かつ、変更するinput要素はひとつとは限りません。
checkboxもある場合があります。
いずれにしても検証用のソースなのでこのまま使うわけではありません。

補足日時：2009/02/27 11:18

通報する