画像に置き換えようとしている「送信」ボタンがあります
<input type="submit" value="Continue" />
HTML を変更することも、JavaScript を使用することもできません。私はCSSにしかアクセスできません。
valueCSSのみを使用して「Continue」(属性)という単語を削除することは可能ですか?
編集
私は実際に、すでに画像でボタンのスタイルを設定することができました。「続行」ボタンを削除したいと思います。少し前にここで提案された値を負に設定することでそれを行いましたtext-indentが、削除されました。誰が投稿したのだろうかと思うので、答えとして受け入れることができました。
免責事項: これは悪い答えです。心の奥底で、あなたもそれを知っていることを願っています。私の公正な警告を嘲笑するなら、CeSSei 8 の宇宙人があなたを誘拐し、4 次元であなたをモデル化するでしょう。自己責任でこの回答に賛成票を投じてください。私はそれを今では別の人生のように書いたものであり、読むたびに私の魂の深さを調べます. 私はウェブのために泣きます。あなたは警告されました。
CSS のみを使用してコントロールの値を削除する必要がある理由を想像できません。私は確かにそれをすることを考える必要さえありませんでした.
font-size: 0とにかく、要素の使用emと ユニットを不可能にする代替手段exは、テキストを透明な「ブラシ」でレンダリングし、事実上まったくレンダリングしないことです。
color: transparent;
入力要素に適用される上記の規則は、要素内のプレースホルダー テキストの色には影響しないことに注意してください。
このような「ハック」のほとんどがそうであるように、この解決策にはいくつかの問題があります。おそらく、少なくともuser-select: none上記のルールと一緒に追加して、テキストのユーザー選択を無効にすることをお勧めします。これは、望ましい場合と望ましくない場合があります。
input[type="submit"] {
font-size:0;
width:120px;
height:30px;
background: url('dir/image.png') no-repeat left top;
border: none;
}
これでうまくいきます。画像パスはスタイルシートからの相対パスであることを忘れないでください。
使用font-size: 0:
input[type="submit"] {
font-size:0;
width:100px;
height:20px;
background:red; /** or `background: url('some.jpg') no-repeat 0 0;` */
border:0;
cursor:pointer;
}
SpaceBeerの回答に加えて、ネガを使用してtext-indent、テキストがある場合は削除することをお勧めします。
input[type="submit"] {
font-size:0;
width:120px;
height:30px;
background: url('dir/image.png') no-repeat left top;
border: none;
overflow: hidden;
text-indent: -99em;
}