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

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 ]

1 голос
/ 28 сентября 2009

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;
1 голос
/ 24 сентября 2009

Это работает в 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;
0 голосов
/ 16 апреля 2013

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

0 голосов
/ 04 января 2011

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

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

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

font-size:999px

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

0 голосов
/ 31 мая 2010 
color:transparent;  /* For FF */
*padding-left:1000px ;  /* FOR IE6,IE7 */
0 голосов
/ 11 февраля 2015

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

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

CSS: 

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

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

0 голосов
/ 19 февраля 2010

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

Например: 

color: transparent;
text-transform: uppercase;
Страница:
...