Как применить фоновое изображение к текстовому вводу без потери границы по умолчанию в браузерах Firefox и WebKit?

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

IE 8 не имеет этой проблемы. Chrome 2 и Firefox 3.5 делают, и я предполагаю и другие браузеры. Из того, что я читал в Интернете, IE 7 имеет ту же проблему, но у этого сообщения не было решения.

Вот пример:

<html>
<head>
  <style>
    .pictureInput {
      background-image: url(http://storage.conduit.com/images/searchengines/search_icon.gif);
      background-position: 0 1px;
      background-repeat: no-repeat;
    }
  </style>
<body>
  <input type="text" class="pictureInput" />
  <br />
  <br />
  <input type="text">
</body>
</html>

В Chrome 2 это выглядит так: http://www.screencast.com/users/jadeonly/folders/Snagit/media/d4ee9819-c92a-4bc2-b84e-e3a4ed6843b6

И в Firefox 3.5: http://www.screencast.com/users/jadeonly/folders/Snagit/media/d70dd690-9273-45fb-9893-14b38202ddcc

Обновление: решение JS: Я все еще надеюсь найти чистое решение CSS-on-the-input, но здесь обходной путь, который я буду использовать сейчас. Обратите внимание, что это вставлено прямо из моего приложения, так что это не приятный, самостоятельный пример, например, выше. Я только что включил соответствующие части из своего большого веб-приложения. Вы должны уметь получить эту идею. HTML - это вход с классом "link". Большое вертикальное положение фона - это то, что он спрайт. Протестировано в IE6, IE7, IE8, FF2, FF3.5, Opera 9.6, Opera 10, Chrome 2, Safari 4. Мне нужно настроить положение фона на несколько пикселей в некоторых браузерах:

JS:

 $$('input.link').each(function(el) {
   new Element('span',{'class':'linkIcon'}).setText(' ').injectBefore(el);
   if (window.gecko) el.setStyle('padding', '2px 2px 2px 19px');
 });

CSS

input.link { padding-left: 19px; }
span.linkIcon { z-index: 2; width: 19px; height: 19px; position: absolute; background-image: url(img/fields.gif); background-position: 1px -179px; background-repeat: no-repeat; }

Обновление: CSS Close Enough Solution: На основе предложения от kRON здесь CSS, чтобы входы соответствовали FF и IE в Vista, что делает хороший выбор, если вы решите отказаться от чистых значений по умолчанию и применять один стиль. Я немного изменил его и добавил "синие" эффекты:

CSS

input[type=text], select, textarea {
    border-top: 1px #acaeb4 solid;
    border-left: 1px #dde1e7 solid;
    border-right: 1px #dde1e7 solid;
    border-bottom: 1px #e3e9ef solid;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    padding: 2px;
}
input[type=text]:hover, select:hover, textarea:hover, input[type=text]:focus, select:focus, textarea:focus {
    border-top: 1px #5794bf solid;
    border-left: 1px #c5daed solid;
    border-right: 1px #b7d5ea solid;
    border-bottom: 1px #c7e2f1 solid;
}
select { border: 1px; }

Ответы

Ответ 1

Когда вы меняете стиль границы или фона на текстовые входы, они возвращаются к самому основному режиму рендеринга. Текстовые входы, которые являются os-style, обычно являются оверлеями (например, flash), которые отображаются поверх документа.

Я не верю, что в вашей проблеме есть чистое исправление CSS. Лучше всего сделать - на мой взгляд - выбрать стиль, который вам нравится, и подражать ему с помощью CSS. Так что независимо от того, в каком браузере вы находитесь, входы будут выглядеть одинаково. У вас все еще есть эффекты зависания и тому подобное. Эффекты свечения стиля OS X могут быть сложными, но я уверен, что это выполнимо.

@Alex Morales: Ваше решение является излишним. border: 0; игнорируется в пользу границы: 1px solid # abadb3; и приводит к ненужным байтам, переданным по проводу.

Ответ 2

Это CSS, который я использую, который может обеспечить возврат по умолчанию:

input, select, textarea {
    border-top: 1px #acaeb4 solid;
    border-left: 1px #dde1e7 solid;
    border-right: 1px #dde1e7 solid;
    border-bottom: 2px #f1f4f7 solid;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
}

Вы также можете применить :active и дать элементам управления синеватый оттенок после их выбора.

Ответ 3

Обновить!

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

<html>
    <head>
        <style>
            .pictureInput {
                text-indent: 20px;
            }
            .input-wrapper {
                position:relative;
            }
            .img-wrapper {
                position:absolute;
                top:2px;
                left:2px;
            }
        </style>
    </head>
    <body>
        <div class="input-wrapper">
            <div class="img-wrapper"><img src="http://storage.conduit.com/images/searchengines/search_icon.gif" alt="asddasd" /></div>
            <input type="text" class="pictureInput" />
        </div>
        <br />
        <br />
        <input type="text">
    </body>
</html>

Используя абсолютное относительное позиционирование, вы можете сделать абсолютный div (содержащий изображение) абсолютным по отношению к его родительскому элементу, который могут обрабатываться всеми браузерами, о которых я знаю (не считая версий под-IE6, IE6+ подойдет). Масштабирование пользователя может быть проблемой, но это то же самое, что и обходные пути.

С другой стороны, вам вообще не нужно менять стили входных данных (за исключением текстового отступа, но вы все равно это сделаете, я надеюсь).

С другой стороны, это не самый красивый обходной путь.

Старый!

Я знаю, что это не то, что вы хотите, но вы могли бы сделать что-то подобное, чтобы, по крайней мере, сделать все входные границы согласованными.

input {
    border-color:#aaa;
    border-width:1px;
}

Я не пробовал его во всех браузерах, но поскольку вы не устанавливаете стиль рамки, он может использовать собственный стиль, но с другим размером (хотя вы можете пропустить это тоже). Я думаю, что ключ в том, чтобы просто установить цвет границы на что-то, чтобы все поля ввода использовали один и тот же цвет границы, а остальное оставлялось на усмотрение браузера.

Ответ 4

У меня было текстовое фоновое изображение, и это меня тоже раздражало. Поэтому я помещаю относительный <div> вокруг <input> и затем добавили изображение, абсолютно расположенное над <input> .

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

С небольшим количеством воровства это выглядело неплохо с IE8, Firefox, Chrome и Opera, но это был ужасный kludge, и было бы неплохо, если бы браузеры исправили его.