CSS для скрытия текста значения КНОПКИ ВВОДА
-
03-07-2019 - |
Вопрос
В настоящее время я занимаюсь укладкой <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;