Z jakiegoś powodu większość nowoczesnych przeglądarek przestanie stosować domyślny styl obramowania wejściowego do pól tekstowych, jeśli nadasz im obraz tła. Zamiast tego dostajesz ten brzydki, wciągnięty styl. Z tego, co mogę powiedzieć, nie ma sposobu, aby CSS zastosować domyślny styl przeglądarki.Jak zastosować obraz tła do wprowadzania tekstu bez utraty domyślnej granicy w przeglądarkach Firefox i WebKit?
IE 8 nie ma tego problemu. Chrome 2 i Firefox 3.5 i zakładam też inne przeglądarki. Z tego, co przeczytałem w Internecie, IE 7 ma ten sam problem, ale ten post nie miał rozwiązania.
Oto przykład:
<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>
W Chrome 2 wygląda tak: http://www.screencast.com/users/jadeonly/folders/Snagit/media/d4ee9819-c92a-4bc2-b84e-e3a4ed6843b6
iw Firefoksie 3.5: http://www.screencast.com/users/jadeonly/folders/Snagit/media/d70dd690-9273-45fb-9893-14b38202ddcc
Aktualizacja: JS Rozwiązanie: mam jeszcze nadzieję znaleźć czyste rozwiązanie CSS-na-wejściu, ale oto sposób obejścia tego problemu. Pamiętaj, że jest to wklejone bezpośrednio z mojej aplikacji, więc nie jest to miły, samodzielny przykład jak wyżej. Właśnie dodałem odpowiednie elementy z mojej dużej aplikacji internetowej. Powinieneś być w stanie uzyskać pomysł. Kod HTML to dane wejściowe z klasą "link". Duża pionowa pozycja tła jest spowodowana tym, że jest ikoną. Przetestowane w IE6, IE7, IE8, FF2, FF3.5, Opera 9.6, Opera 10, Chrome 2, Safari 4. muszę dostosować pozycję tle Kilka pikseli w niektórych przeglądarkach nieruchomych:
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; }
Aktualizacja: CSS wystarczająco blisko Rozwiązanie: na podstawie sugestii Kron oto CSS, aby wejść dopasować FF i IE w Vista, który sprawia, że dobry wybór, jeśli zdecydujesz się zrezygnować z czystych wartości domyślnych i wymusić jeden styl. Mam zmodyfikowano jego lekko i dodał "Blueish" efektów:
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; }
Hej, spróbuj tego. To trochę hackish, ale wydaje się, że działa dla mnie. granica: 0; border: 1px solid # abadb3; "Obramowanie: 0" zabije domyślną granicę na wejściu, a następująca reguła będzie wyglądać tak, jak chcesz. –
Niestety nie było jasne. To by działało, gdybym po prostu chciał mieć solidną granicę, ale to, czego chcę, żeby wyglądała tak jak w przeglądarkach, gdy nie ma stylu. Chcę natywny, domyślny styl obramowania. Na przykład zobacz styl w Firefoksie: http://www.screencast.com/users/jadeonly/folders/Snagit/media/d70dd690-9273-45fb-9893-14b38202ddcc –
Moja odpowiedź nie jest zbędna. Granica: 0 czyści styl granicy na wejściu. Poniższy styl stosuje nowy styl do danych wejściowych. Jak w kaskadowych arkuszach stylów;) –