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

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

31 голосов
/ 09 июля 2009

По некоторым причинам большинство современных браузеров перестанут применять свой стиль ввода по умолчанию к текстовым полям, если вы дадите им фоновое изображение. Вместо этого вы получаете этот уродливый стиль вставки. Из того, что я могу сказать, 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 Solution: Я все еще надеюсь найти чистое решение 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 Закрыть Достаточно Решение: Основываясь на предложении от 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; }

Ответы [ 4 ]

10 голосов
/ 11 июля 2009

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

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

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

6 голосов
/ 24 августа 2009

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

2 голосов
/ 09 июля 2009

Обновление!

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

<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;
}

example image

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

0 голосов
/ 30 июня 2012

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

вокруг , а затем добавил изображение, абсолютно расположенное над .

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

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

...