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

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

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

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

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

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

Ответ 1

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

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

Ответ 2

Я использую

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

Ответ 3

У меня была противоположная проблема (работала в 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;
}

Ответ 4

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

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

Ответ 5

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

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

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

Ответ 6

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

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

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

Ответ 7

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

Ответ 8

Используйте условные операторы в верхней части документа 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/conditional-stylesheets-vs-css-hacks-answer-neither/

Ответ 9

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

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

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

Ответ 10

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

#your_button_id 
    {
        color: transparent;
    }

Ответ 11

Это работает в 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;

Ответ 12

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;

Ответ 13

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

Ответ 14

У меня была такая же проблема. И как сообщалось много других сообщений: трюк для заполнения работает только для IE.

font-size:0px все еще показывает некоторые маленькие точки.

Единственное, что сработало для меня, - это сделать противоположное

font-size:999px

... но у меня были только кнопки размером 25x25 пикселей.

Ответ 15

Вместо этого просто сделайте hook_form_alter и сделайте кнопку кнопкой изображения, и все будет готово!

Ответ 16

Это лучшее для меня:

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"/>, он поместит текст по умолчанию "Отправить" внутри вашей кнопки. SO, просто установите font-size: 0; в свой submit, а затем убедитесь, что вы установили height и width для своего типа ввода, чтобы отображалось ваше изображение. НЕ забывайте, что медиа-запросы для вашей отправки, если они вам нужны, например:

CSS

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

Это означает, что когда экран имеет ровно 600 пикселей ширину или больше, кнопка изменит размеры

Ответ 17

color:transparent;, а затем любое свойство text-transform тоже делает трюк.

Например:

color: transparent;
text-transform: uppercase;