Возможно ли сделать текст входного значения прозрачным?

Question

Я хочу сделать текстовое значение для "Войти сейчас" прозрачным из тега, из которого я использую следующее... <input type="image" value="Login Now">, я бы просто сделал цвет фона: прозрачный?

Answer 1

Вы хотите, чтобы текст на кнопке ввода был прозрачным? Если так, то почему бы просто не оставить текст пустым?

Теоретически вы можете сопоставить цвет текста с цветом фона для ввода, чтобы "скрыть" его, но я не уверен, что рекомендую это.

тег:

<input type="image" value="Login Now" id="loginButton"/>

CSS:

input#loginButton
{
    color:#fff;
    background-color:#fff;
}

Опять же, вы не знаете, зачем вводить текст, а затем делать его прозрачным / скрытым?

Answer 2

Вы можете использовать Firebug в Firefox, чтобы найти цвет фона этого элемента ввода, а затем установить стиль элемента, чтобы этот цвет был на переднем плане.

то есть, если цвет фона белый, измените свой ввод на

<input type="image" value="Login Now" style="color: #ffffff;">

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

input {
    color: white;
}

или добавьте ID или класс и измените стиль этими... Просто убедитесь, что передний план и фон имеют одинаковый цвет.

Answer 3

value на <input type="image"> обычно не используется. Браузеры не согласны с тем, передается ли значение как часть формы (что делает его бесполезным для этой цели), и его вообще не следует отображать как текст.

Он отображается как текст в Firefox и WebKit, но только потому, что эти браузеры используют его как запасной контент для alt-текста, когда вы не включили alt приписывать. Это нестандартная причуда, на которую не стоит полагаться.

Указание текста как alt атрибут вместо-или-в-дополнение к value лучше и становится видимым в IE и Opera. Но это все еще очень сомнительно. Это не имеет смысла иметь <input type="image"> без реального изображения src, Стандарт HTML4 не говорит, что браузеры должны делать с этим. HTML5 говорит, что оба src а также alt должен присутствовать. В любом случае, рендеринг отсутствующих изображений в IE вряд ли будет тем, что вам нужно.

Что именно вы пытаетесь сделать здесь? Вы хотите кнопку чистого изображения? Тогда используйте <input type="image"> с этим изображением в его src, Вы хотите текстовую кнопку? Тогда используйте <input type="submit">, потенциально в стиле, чтобы удалить границы и изменить фон.

Чтобы ответить на поставленный вопрос, вы можете установить только background-color а также border-color к transparent значение. Другие свойства, такие как color (это то, что вам нужно будет установить цвет текста) не примет это. В CSS3 вы можете использовать rgba цвет с альфа-каналом, установленным на 0, но не ожидайте поддержки от IE.