CSS, чтобы скрыть текст значения INPUT BUTTON - PullRequest
Новая
       17

CSS, чтобы скрыть текст значения INPUT BUTTON

52 голосов
/ 01 марта 2009

В настоящее время я оформляю элемент <input type='button'/> с помощью следующего CSS: 

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

Я хочу, чтобы кнопка отображалась как изображение, но я не хочу, чтобы текст value отображался поверх него. Это нормально работает для Firefox, как и ожидалось. Однако в Internet Explorer 6 и Internet Explorer 7 я все еще вижу текст.

Я пробовал всевозможные трюки, чтобы скрыть текст, но безуспешно. Есть ли решение, чтобы заставить Internet Explorer вести себя?

(я вынужден использовать type=button, потому что это форма Drupal и ее API формы не поддерживает тип изображения.)

Ответы [ 17 ]

50 голосов
/ 22 июня 2009

Я использую 

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 */
35 голосов
/ 04 апреля 2009

У меня была противоположная проблема (работала в 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;
}
20 голосов
/ 22 июня 2009

хорошо:

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

работа потрясающая для меня!

9 голосов
/ 01 марта 2009

Вы пытались установить для свойства text-indent что-то вроде -999em? Это хороший способ «спрятать» текст.

Или вы можете установить размер шрифта равным 0, что также будет работать.

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

6 голосов
/ 01 марта 2009

Почему вы вообще включаете атрибут value? Из памяти вам не нужно указывать это (хотя стандарты HTML могут сказать, что вы делаете - не уверен). Если вам нужен атрибут value, почему бы не указать value=""?

Если вы выберете этот подход, вашему CSS понадобятся дополнительные свойства для высоты и ширины фонового изображения.

3 голосов
/ 21 января 2011

Различие, которое некоторые из вас видят в решениях, которые работают или не работают в разных IE, может быть связано с включением или выключением режима совместимости. В IE8 текстовый отступ работает нормально , если не включен режим совместимости . Если режим совместимости включен, то размер шрифта и высота строки делают свое дело, но могут испортить отображение Firefox.

Таким образом, мы можем использовать хак css, чтобы позволить firefox игнорировать наше правило ie ... вот так ... 

text-indent:-9999px;
*font-size: 0px; line-height: 0;
2 голосов
/ 20 марта 2013

Я где-то это заметил:

добавление преобразования текста для ввода, чтобы удалить его 

input.button {
    text-indent:-9999px;
    text-transform:capitalize;
}
2 голосов
/ 28 апреля 2011

Используйте условные операторы в верхней части 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 Boilerplate - более конкретно paulirish.com / 2008 / условные таблицы стилей-vs-css-hacks-answer-none /

2 голосов
/ 12 мая 2009

Применение font-size: 0.1px; к кнопке работает для меня в Firefox, Internet Explorer 6, Internet Explorer 7 и Safari. Ни одно из найденных мной решений не работает во всех браузерах.

2 голосов
/ 18 февраля 2014

Напишите в свой файл CSS: 

#your_button_id 
    {
        color: transparent;
    }
Страница:
...