Vì một số lý do, hầu hết các trình duyệt hiện đại sẽ ngừng áp dụng kiểu đường viền nhập mặc định của chúng cho các hộp văn bản nếu bạn cung cấp cho chúng hình nền. Thay vào đó bạn sẽ có được phong cách inset xấu xí đó. Từ những gì tôi có thể nói, không có cách nào để áp dụng kiểu trình duyệt mặc định.Làm cách nào để áp dụng hình nền cho đầu vào văn bản mà không làm mất đường viền mặc định trong trình duyệt Firefox và WebKit?
IE 8 không có vấn đề này. Chrome 2 và Firefox 3.5 cũng vậy và tôi cũng giả sử các trình duyệt khác. Từ những gì tôi đã đọc trực tuyến, IE 7 có cùng một vấn đề, nhưng bài đăng đó không có giải pháp.
Dưới đây là một ví dụ:
<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>
Trong Chrome 2 nó trông như thế này: http://www.screencast.com/users/jadeonly/folders/Snagit/media/d4ee9819-c92a-4bc2-b84e-e3a4ed6843b6
Và trong Firefox 3.5: http://www.screencast.com/users/jadeonly/folders/Snagit/media/d70dd690-9273-45fb-9893-14b38202ddcc
Cập nhật: JS Giải pháp: tôi vẫn hy vọng để tìm một giải pháp CSS-on-the-input thuần túy, nhưng đây là giải pháp thay thế mà tôi sẽ sử dụng ngay bây giờ. Xin lưu ý rằng điều này được dán ngay ra khỏi ứng dụng của tôi vì vậy không phải là một ví dụ đẹp, độc lập như trên. Tôi vừa đưa các phần có liên quan ra khỏi ứng dụng web lớn của mình. Bạn sẽ có thể có được ý tưởng. HTML là đầu vào với lớp "liên kết". Các vị trí nền dọc lớn là bởi vì nó là một sprite. Thử nghiệm trong IE6, IE7, IE8, FF2, FF3.5, Opera 9.6, Opera 10, Chrome 2, Safari 4. Tôi cần phải tinh chỉnh vị trí nền một vài điểm ảnh trong một số trình duyệt vẫn:
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; }
cập nhật: CSS Đóng đủ giải pháp: Dựa trên những gợi ý từ Kron đây là CSS để làm cho đầu vào phù hợp với FF và IE trong Vista mà làm cho một lựa chọn tốt nếu bạn quyết định từ bỏ các mặc định thuần túy và thực thi một phong cách. Tôi đã thay đổi chút ít của mình và bổ sung thêm các hiệu ứng "xanh dương":
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; }
Xin chào, hãy thử điều này. Đó là một chút hackish nhưng nó có vẻ làm việc cho tôi. border: 0; đường viền: 1px solid # abadb3; 'Đường viền: 0' sẽ giết đường viền mặc định trên đầu vào và quy tắc sau sẽ là làm cho giao diện của bạn trông giống như bạn muốn. –
Xin lỗi tôi đã không rõ ràng. Điều đó sẽ hiệu quả nếu tôi chỉ muốn nó có một đường viền chắc chắn, nhưng tôi muốn nó trông như thế nào trong trình duyệt khi không có kiểu dáng. Tôi muốn kiểu gốc, kiểu viền mặc định. Ví dụ: xem phong cách trong Firefox: http://www.screencast.com/users/jadeonly/folders/Snagit/media/d70dd690-9273-45fb-9893-14b38202ddcc –
Câu trả lời của tôi không thừa. Đường viền: 0 xóa kiểu đường viền trên đầu vào. Kiểu sau áp dụng kiểu mới cho đầu vào. Như trong các bảng định kiểu xếp tầng;) –