CSS для скрытия текста значения КНОПКИ ВВОДА

StackOverflow https://stackoverflow.com/questions/600438

Вопрос

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

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

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

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

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

Это было полезно?

Решение

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

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

Другие советы

Я использую

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

У меня была противоположная проблема (работала в Internet Explorer, но не в Firefox).Для Internet Explorer вам нужно добавить левое заполнение, а для Firefox вам нужно добавить прозрачный цвет.Итак, вот наше комбинированное решение для кнопки со значком размером 16 x 16 пикселей:

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;
}

что ж:

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

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

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

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

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

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

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

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

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

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

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

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

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

#your_button_id 
    {
        color: transparent;
    }

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

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;

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

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

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

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

font-size:999px

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

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

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

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;
  }
}

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

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

color:transparent; и тогда любой text-transform собственность тоже делает свое дело.

Например:

color: transparent;
text-transform: uppercase;
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top