web-dev-qa-db-ja.com

INPUT BUTTON値のテキストを非表示にするCSS

私は現在<input type='button'/>要素と次のCSS：

background: transparent url(someimage);
color: transparent;

ボタンを画像として表示したいのですが、valueテキストをその上に表示したくありません。これはFirefoxで正常に機能します。ただし、Internet Explorer 6およびInternet Explorer 7では、テキストを表示できます。

テキストを隠すためにあらゆる種類のトリックを試しましたが、成功しませんでした。 Internet Explorerを動作させるソリューションはありますか？

（私はtype=buttonこれはDrupalフォームであり、そのフォームAPIはイメージタイプをサポートしていません。）

cssinternet-explorerdrupalinputtransparency
52
Scott Evernden

なぜvalue属性を含めるのですか？メモリーから、それを指定する必要はありません（ただし、HTML標準ではそうするように指示されている場合があります-不明）。 value属性が必要な場合は、単にvalue=""？

このアプローチをとる場合、CSSには背景画像の高さと幅の追加プロパティが必要です。

6
Phil.Wheeler

私が使う

button {text-indent:-9999px;}
* html button{font-size:0;display:block;line-height:0}  /* ie6 */
*+html button{font-size:0;display:block;line-height:0}  /* ie7 */
50
Emily

私は反対の問題を抱えていました（Internet Explorerで働いていましたが、Firefoxでは働いていませんでした）。 Internet Explorerの場合は左のパディングを追加する必要があり、Firefoxの場合は透明色を追加する必要があります。 16px x 16pxのアイコンボタンを組み合わせたソリューションは次のとおりです。

input.iconButton
{
    font-size: 1em;
    color: transparent; /* Fix for Firefox */
    border-style: none;
    border-width: 0;
    padding: 0 0 0 16px !important; /* Fix for Internet Explorer */
    text-align: left;
    width: 16px;
    height: 16px;
    line-height: 1 !important;
    background: transparent url(../images/button.gif) no-repeat scroll 0 0;
    overflow: hidden;
    cursor: pointer;
}
35
jsalwen

まあ：

font-size: 0; line-height: 0;

私にとって素晴らしい仕事です！

20
Stanislav Müller

Text-indentプロパティを-999emなどに設定しようとしましたか？それはテキストを「隠す」良い方法です。

または、font-sizeを0に設定することもできますが、これも機能します。

http://www.productivedreams.com/ie-not-intepreting-text-indent-on-submit-buttons/

9
Ryan Doherty

さまざまなIEで機能するソリューションまたは機能しないソリューションであなたが見ている違いは、互換モードのオン/オフが原因である可能性があります。 IE8では、text-indentは問題なく動作しますnless互換モードがオンになっています。互換モードがオンの場合、font-sizeとline-heightがトリックを行いますが、Firefoxのディスプレイを台無しにする可能性があります。

したがって、cssハックを使用して、FirefoxがIEルールを無視できるようにします。

text-indent:-9999px;
*font-size: 0px; line-height: 0;
3
msmithgu

私はこれをどこかから指摘しました：

入力にテキスト変換を追加して削除する

input.button {
    text-indent:-9999px;
    text-transform:capitalize;
}
2
FLOQ Design

CSSファイルに書き込みます。

#your_button_id 
    {
        color: transparent;
    }
2
Sergey Povisenko

申請中 font-size: 0.1px;ボタンの機能は、Firefox、Internet Explorer 6、Internet Explorer 7、およびSafariで機能します。私が見つけた他のソリューションは、すべてのブラウザーで機能しませんでした。

2
patrick

HTMLドキュメントの上部で条件ステートメントを使用します。

<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->

次に、CSSに追加します

.ie7 button { font-size:0;display:block;line-height:0 }

HTML5ボイラープレート-より具体的には paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

2
Rob B

これは、Firefox 3、Internet Explorer 8、Internet Explorer 8互換モード、Opera、およびSafariで動作します。

*注意：これを含むテーブルセルにはpadding:0およびtext-align:center。

background: none;
background-image: url(../images/image.gif);
background-repeat:no-repeat;
overflow:hidden;
border: NONE;
width: 41px; /*width of image*/
height: 19px; /*height of image*/
font-size: 0;
padding: 0 0 0 41px;
cursor:pointer;
1
DD

overflow:hiddenおよびpadding-leftは私のためにうまく働いています。

Firefoxの場合：

width:12px;
height:20px;
background-image:url(images/arrow.gif);
color:transparent;
overflow:hidden;
border:0;

IEの場合：

padding-left:1000px;
1
Niels
color:transparent;  /* For FF */
*padding-left:1000px ;  /* FOR IE6,IE7 */
0
Somu

私はまったく同じ問題を抱えていました。そして、他の多くの投稿が報告したように：パディングトリックはIEでのみ機能します。

font-size:0pxはまだいくつかの小さな点を示しています。

私のために働いた唯一のことは反対をすることです

font-size:999px

...しかし、25x25ピクセルのボタンしかありませんでした。

0
Dave

代わりに、hook_form_alterそしてボタンを画像ボタンにすれば完了です！

0
Bhavin Joshi

この次は私のために最もうまくいった：

[〜＃〜] html [〜＃〜]：

<input type="submit"/>

[〜＃〜] css [〜＃〜]：

input[type=submit] {
    background: url(http://yourURLhere) no-repeat;
    border: 0;
    display: block;
    font-size:0;
    height: 38px;
    width: 171px;
}

<input type="submit"/>にvalueを設定しない場合、デフォルトのテキスト「Submit」がボタン内に配置されます。そのため、送信時にfont-size: 0;を設定し、入力タイプにheightおよびwidthを設定して、画像が表示されるようにします。必要に応じて、送信するメディアクエリを忘れないでください。次に例を示します。

CSS：

@media (min-width:600px) {
  input[type=submit] {
    width:200px;
    height: 44px;
  }
}

つまり、画面の幅がちょうど600ピクセル以上の場合、ボタンのサイズが変更されます

0
Jonathan James