CSS для скрытия текста значения кнопки INPUT

Ваш код использует технику, известную как "прятание текста", для того чтобы скрыть текст на кнопке, что может быть полезно для улучшения дизайна, но при этом оставляет проблему для доступности. Давайте рассмотрим ваш код.

Вы используете следующее:

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

Этот подход работает следующим образом:

1. text-indent: -9999px; – сдвигает текст за пределы видимости, однако, он все еще доступен для экранных считывателей.
2. Правила для IE6 и IE7 устанавливают размер шрифта в 0 и делают кнопку блочным элементом, что помогает с визуальным отображением в этих устаревших браузерах.

Однако, несмотря на то, что текст скрыт, важно помнить о доступности. Рекомендуется использовать aria-label или title, чтобы обеспечить пользователям возможность понимать функциональность кнопки. Например:

<button aria-label="Добавить в корзину">+</button>

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

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

input.iconButton
{
    font-size: 1em;
    color: transparent; /* Исправление для Firefox */
    border-style: none;
    border-width: 0;
    padding: 0 0 0 16px !important; /* Исправление для 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;
}

Таким образом, применив этот CSS-код, вы сможете добиться корректного отображения кнопки-иконки в обоих браузерах.

Ваше решение с использованием стилей font-size: 0; и line-height: 0; действительно отлично работает для ваших нужд! Такие свойства позволяют скрыть текст без его удаления из документа, что может быть полезно в случаях, когда нужно сохранить доступность для экранных считывателей или SEO, но при этом не отображать текст визуально. Если возникнут дополнительные вопросы или нужны альтернативные решения, не стесняйтесь задавать их!

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

Также можно установить font-size на 0, это тоже сработает.

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

Ваш вопрос о необходимости включения атрибута value вполне уместен. На самом деле, в большинстве случаев для элементов форм, таких как <input>, атрибут value не является обязательным. Однако, если вы хотите, чтобы поле ввода содержало начальное значение (например, текст), то указание этого атрибута имеет смысл.

Что касается использования value="", это может быть хорошей практикой для явного указания того, что поле не должно содержать никакого значения по умолчанию. Это также может помочь избежать путаницы и сделать ваш код более читаемым.

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