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

Question

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

Answer 1

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

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

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

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

input {
    color: white;
}

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

Answer 2

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

Он отображается как текст в Firefox и WebKit, но только потому, что эти браузеры используют его как запасной контент для alt-text, когда вы не включили атрибут 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.

Answer 3

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

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

tag:

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

css:

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

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