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

StackOverflow https://stackoverflow.com/questions/600438

質問

現在、次のCSSを使用して<input type='button'/>要素をスタイル設定しています：

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

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

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

（これはDrupalフォームであり、そのフォームAPIはイメージタイプをサポートしていないため、type=buttonを使用するように制限されています。）

役に立ちましたか？

解決

なぜvalue属性を含めるのですか？メモリーから、それを指定する必要はありません（HTML標準ではそうするように言われるかもしれませんが-確かではありません）。 value=""属性が必要な場合は、単に<=>と記載しないのはなぜですか？

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

他のヒント

使用

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 */

反対の問題がありました（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;
}

well：

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

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

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

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

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

さまざまなIEで機能するソリューションまたは機能しないソリューションで見られる違いは、互換モードのオン/オフが原因である可能性があります。 IE8では、互換モードがオンになっていない限り、text-indentはうまく機能します。互換モードがオンの場合、font-sizeとline-heightはトリックを行いますが、Firefoxの表示を台無しにする可能性があります。

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

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

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 /

私はどこかからこれを書き留めました：

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

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

CSSファイルへの書き込み：

#your_button_id 
    {
        color: transparent;
    }

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

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;

これは、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;

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

font-size:0pxにはまだ小さなドットが表示されます。

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

font-size:999px

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

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

以下は私にとって最適な方法です。

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;
}

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

CSS： 

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

これは、画面の幅がちょうど600ピクセル以上の場合、ボタンのサイズが変更されることを意味します

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

color:transparent;そして、任意のtext-transformプロパティもトリックを行います。

例：

color: transparent;
text-transform: uppercase;
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top