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 формы не поддерживает тип изображения.)

17 52
drupal css internet-explorer-8 input transparency

17 ответов:

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

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

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

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

хорошо:

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

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

20

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

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

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

9

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

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

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

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

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

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

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

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

#your_button_id 
    {
        color: transparent;
    }
2

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

2

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

Для Firefox:

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

для IEs:

padding-left:1000px;
1

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

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

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

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

font-size:999px

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

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

это следующее работает лучше всего для меня:

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

CSS:

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

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

0

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

0

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

например:

color: transparent;
text-transform: uppercase;
-1