Как я могу применить фоновое изображение к вводимому тексту без потери границы по умолчанию в браузерах Firefox и WebKit?
https://stackoverflow.com/questions/1100409
-
11-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
По какой-то причине большинство современных браузеров перестанут применять свой стиль границ ввода по умолчанию к текстовым полям, если вы предоставите им фоновое изображение.Вместо этого вы получаете этот уродливый стиль вставки.Из того, что я могу сказать, также нет способа 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 - это входные данные с помощью класса "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 Достаточно Близкое решение: Основываясь на предложении 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; }
Решение
Когда вы меняете стиль границы или фона при вводе текста, Они возвращаются к самому простому режиму рендеринга.Текстовые вводимые данные в стиле os обычно представляют собой оверлеи (например, flash is), которые отображаются поверх документа.
Я не верю, что существует чистое CSS-решение вашей проблемы.На мой взгляд, лучше всего выбрать стиль, который вам нравится, и эмулировать его с помощью CSS.Таким образом, независимо от того, в каком браузере вы используете, входные данные будут выглядеть одинаково.У вас все еще могут быть эффекты наведения курсора мыши и тому подобное.Эффекты свечения в стиле OS X могут быть сложными, но я уверен, что это выполнимо.
@Алекс Моралес:Ваше решение избыточно.граница:0;игнорируется в пользу границы:твердый размер 1 пиксель #abadb3;это приводит к передаче ненужных байтов по проводу.
Другие советы
Это 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 и дайте элементам управления, которые голубоватый оттеняйте, как только они будут выбраны.
Обновление!
Хорошо, вот обходной путь, который, я думаю, совместим с несколькими браузерами.Единственная проблема заключается в том, что стиль по умолчанию отличается на несколько пикселей, поэтому это может потребовать некоторой настройки.
<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;
}
Я не пробовал это во всех браузерах, но поскольку вы не устанавливаете стиль границ, он может использовать собственный стиль, но с другим размером (хотя вы можете пропустить и это).Я думаю, ключ в том, чтобы просто установить цвет границы на что-то такое, чтобы все поля ввода использовали один и тот же цвет границы, а остальное оставить на усмотрение браузера.
У меня было текстовое фоновое изображение, и это тоже меня раздражало.Поэтому я поставил относительную точку <div> вокруг<input>, а затем добавил изображение, расположенное абсолютно поверх <input>.
Затем, конечно, мне понадобилось немного больше Javascript, чтобы скрыть изображение, если на него щелкнули, или если входные данные попали в фокус с помощью табуляции, или при щелчке по краям изображения.
Немного повозившись, это выглядело довольно неплохо в IE8, Firefox, Chrome и Opera, но это ужасная ошибка, и было бы неплохо, если бы браузеры это исправили.
