CSS, чтобы скрыть входное значение КНОПКИ текст

Question

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

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

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

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

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

Answer 1

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

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

Answer 2

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

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

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

Answer 3

я имел противоположную проблему (работал в Internet Explorer, но не в Firefox). Для Internet Explorer вам нужно добавить левое дополнение, а для Firefox вам нужно добавить прозрачный цвет. Так вот наше комбинированное решение для 16px 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; 
} 

Answer 4

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

Answer 5

хорошо:

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

работа удивительным для меня!

Answer 6

Я использую

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

Answer 7

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

Answer 8

overflow:hidden и padding-left работают отлично для меня.

Для Firefox:

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

Для ИЭ:

padding-left:1000px; 

Answer 9

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

Например:

color: transparent; 
text-transform: uppercase; 

Answer 10

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

Answer 11

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

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

Единственное, что работал для меня делает противоположный

font-size:999px 

... но у меня было только кнопки 25х25 пикселей.

Answer 12

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

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

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

Answer 13

Используйте условные операторы в верхней части 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/

Answer 14

Я это отметил, откуда-то:

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

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

Answer 15

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

Answer 16

Запись в файл CSS:

#your_button_id 
    { 
     color: transparent; 
    } 

Answer 17

Нижеследующая работал лучше для меня:

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; на отправку, а затем убедитесь, что вы установили height и width для вашего типа ввода, чтобы отображалось ваше изображение. НЕ ЗАБУДЬТЕ медиазапросы для вашего представить, если вы нуждаетесь в них, например:

CSS:

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

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