今、カスタマイズしているECがあって、自動生成のフォームがいくつかあった。ボタンを画像にしたくても、触れない領域だからどうしようと思って、開発元に問い合わせた。
画像ボタンにしてしまうとInternet Explorerで入力した値を引き渡せない時があって、危険なのでCSSで制御してほしいって言われた。
なので、inputにスタイルを当てようと思ったのだけれど、id属性もclass属性のないので、スタイルを当てれずに、ネットで調べた。
解決方法
自分がやってのはこんな感じ。
input[name=【name属性の値】]{
border: 0px;
width: 50px;/* 画像の幅 */
height: 20px;/* 画像の高さ */
background: url(【画像のパスが入ります。】) left center no-repeat;
}
こうすると、問題が2つ起きる。
1つは、value属性の値が画像の上に表示されてしまう。
もう1つは、アンカーリンクではないので、カーソルをボタンに乗せても、指マークにならない（ボタンは効く）。
なので、最終的にこんな感じにした。
input[name=【name属性の値】]{
border: 0px;
width: 50px;/* 画像の幅 */
height: 20px;/* 画像の高さ */
background: url(【画像のパスが入ります。】) left center no-repeat;
text-indent: -9999px;/* value属性の値を画面の外に飛ばす */
cursor: pointer;/* カーソルをボタンに乗せたら指マークにする */
}
以下のサイトを参考にさせていただきました。
ありがとうございます。
-
スタイルシート［CSS］/CSSの基本/属性を使った指定 - TAG index Webサイト
http://www.tagindex.com/stylesheet/basic/format4.html -
CSS 「input type="text"」のみスタイル指定
http://tips.recatnap.info/css-%E3%80%8Cinput-typetext%E3%80%8D%E3%81%AE%E3%81%BF%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E6%8C%87%E5%AE%9A/ -
フォーカスのあるフォームの装飾を変化させる - スタイルシートTIPS ふぁくとりー
http://www.nishishi.com/css/form-focus.html