Как я могу применить фоновое изображение к текстовому вводу, не теряя границы по умолчанию в браузерах 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-на-вводе, но сейчас я буду использовать обходной путь. Обратите внимание, что это вставлено прямо из моего приложения, поэтому это не хороший, самостоятельный пример, как указано выше. Я только что включил соответствующие части из своего большого веб-приложения. Вы должны быть в состоянии понять идею. HTML - это ввод с классом «ссылка». Большое вертикальное положение фона связано с тем, что это спрайт. Протестировано в 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; }

input css background-image border
person Jade Ohlhauser    schedule 08.07.2009    source источник
comment
Эй, попробуй это. Это немного хакерски, но, похоже, это работает для меня. граница: 0; граница: 1px сплошная #abadb3; «Граница: 0» уничтожит границу ввода по умолчанию, а следующее правило заставит ее выглядеть так, как вы хотите.   -  person Alex Morales    schedule 09.07.2009
comment
Извините, я не был ясен. Это сработало бы, если бы я просто хотел, чтобы у него была сплошная рамка, но я хочу, чтобы он выглядел так, как в браузерах, когда нет стиля. Мне нужен собственный стиль границы по умолчанию. Например, см. стиль в Firefox: screencast.com/users/jadeonly/folders/Snagit/media/   -  person Jade Ohlhauser    schedule 09.07.2009
comment
Мой ответ не лишний. Граница: 0 очищает стиль границы на входе. Следующий стиль применяет новый стиль к входным данным. Как в каскадных таблицах стилей;)   -  person Alex Morales    schedule 20.07.2009
comment
Я думаю, вы неправильно понимаете, как работает CSS. Нет причин очищать свойство перед установкой его на что-то другое. В тот момент, когда вы меняете границу с помощью CSS, старые значения исчезают.   -  person sholsinger    schedule 31.03.2011

Ответы (4)


arrow_upward
10
arrow_downward

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

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

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

person sholsinger    schedule 10.07.2009

arrow_upward
6
arrow_downward

Это 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 и придать элементам управления голубоватый оттенок после их выбора.

person Filip Dupanović    schedule 24.08.2009
comment
Это выглядит очень хорошо в IE, Firefox и Safari на Vista. Chrome и Opera имеют разные значения по умолчанию, как и некоторые другие операционные системы. Но я воспользуюсь вашим предложением, если решу отказаться и просто применить стиль. Так что, хотя технически это не отвечает на вопрос, большое спасибо за то, что поделились. - person Jade Ohlhauser; 29.09.2009
comment
нп ;)! Если вы можете проанализировать параметр пользовательского агента из заголовка запроса, вы можете условно ссылаться на CSS, который содержит объявления для конкретного браузера. У каждого будет свой собственный input, select, textarea {}, где вы сможете подражать внешнему виду по умолчанию. Делать вещи правильно часто требует много работы :)! - person Filip Dupanović; 30.09.2009

arrow_upward
2
arrow_downward

Обновить!

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

<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+ в порядке). Пользовательское масштабирование может быть проблемой, но именно так обстоят дела с обходными путями.

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

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

Старый!

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

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

пример изображения

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

person varl    schedule 09.07.2009
comment
Это заставляет его выглядеть ближе, но не то же самое. И дело не только в статике. Стиль ввода по умолчанию в Firefox получает эффект наведения и фокуса. В Chrome эффект фокуса всегда применяется, даже к измененной границе, о которой мы говорим, потому что эффект кажется вокруг границы (контура?), а не изменяет саму границу. - person Jade Ohlhauser; 09.07.2009
comment
Я надеюсь, что кто-то предложит более изящные решения, потому что мои довольно грубы. Я обновил свое первое решение выше другим, хотя на самом деле это не решение, а обходной путь. - person varl; 09.07.2009
comment
Спасибо за предложение. Хотя я все еще надеюсь, что этот вопрос о переполнении стека приведет к полному решению, я могу использовать ваше предложение, чтобы приблизиться. Кроме IE8. Это единственный браузер, который я тестировал, не затронутый этой ошибкой, но тогда ваша идея, которая делает Chrome и Firefox лучше, заставляет IE8 теперь ломаться, а также терять стиль и эффект наведения. - person Jade Ohlhauser; 09.07.2009
comment
Обновленное решение не должно ломать IE8, так как оно оставляет входные данные совершенно нетронутыми. - person varl; 09.07.2009
comment
Это то, что я сделаю сейчас. Я реализовал это с помощью JS, поэтому я все еще могу просто вводить данные с помощью класса в HTML: $$('input.link').each(function(el) { new Element('span',{'class' :'linkIcon'}).setText(' ').injectBefore(el); }); Если вы не возражаете, я хотел бы оставить вопрос открытым, чтобы посмотреть, есть ли чистый CSS только для входного решения. Отчасти потому, что это просто так сильно расстраивает, т.е. Почему в TF установка фона влияет на границу?! - person Jade Ohlhauser; 09.07.2009
comment
Это было рассмотрено ранее при переполнении стека, что привело к этой ссылке: 456bereastreet.com/lab/styling-form-controls-revisited/ Первоначально опубликовано в: stackoverflow.com/questions/880152/ - person varl; 09.07.2009
comment
Вот статья: 456bereastreet.com/archive/200701/ и душераздирающая цитата : Мое намерение в этой статье (и ее продолжении, Стилизация еще большего количества элементов управления формами) состояло в том, чтобы показать, что попытки использовать CSS для того, чтобы элементы управления формами выглядели одинаково в разных браузерах и операционных системах, являются бесполезными. Это просто невозможно сделать. - person varl; 09.07.2009

arrow_upward
0
arrow_downward

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

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

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

person Steve Teale    schedule 30.06.2012