Tôi đã xem bài đăng này và đã thử mọi cách có thể để thay đổi phần đệm cho trình giữ chỗ của mình nhưng than ôi, có vẻ như nó không muốn hợp tác.
Dù sao, đây là mã cho css. ( EDIT : Đây là css được tạo từ sass)
#search {
margin-top: 1px;
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
width: 220px;
}
#search form {
position: relative;
}
#search input {
padding: 0 10px 0 29px;
color: #555555;
border: none;
background: url('/images/bg_searchbar.png?1296191141') no-repeat;
width: 180px;
height: 29px;
overflow: hidden;
}
#search input:hover {
color: #00ccff;
background-position: 0px -32px;
}Và đây là html đơn giản:
<div id="search">
<form>
<input type="text" value="" placeholder="Search..." name="q" autocomplete="off" class="">
</form>
<div id="jquery-live-search" style="display: block; position: absolute; top: 15px; width: 219px;">
<ul id="search-results" class="dropdown">
</ul>
</div>
</div>Khá đơn giản? giữ chỗ vì một số lý do nhưng khi bạn cố gắng nhập vào trường nhập, văn bản được căn chỉnh. Có vẻ như bạn chỉ có thể thay đổi màu (cho webkit) của trình giữ chỗ, nhưng nếu tôi cố gắng chỉnh sửa phần đệm của đầu vào chứa, nó sẽ phá hỏng thiết kế của đầu vào! nhổ tóc
Dưới đây là màn hình của trình giữ chỗ và trường nhập liệu có nhập văn bản:
CHỈNH SỬA :
Cho đến bây giờ tôi đã dùng đến plugin jquery này .
Nó hoạt động ngay lập tức và nó khắc phục vấn đề chrome của tôi. Tôi vẫn muốn khám phá vấn đề là gì (nếu nó có liên quan đến chrome của tôi hoặc cái gì đó)
Tôi khá chắc chắn rằng đó không phải là phong cách kể từ khi John Catterfeld tái tạo nó mà không gặp vấn đề gì, vì vậy tôi hy vọng ai đó ngoài kia vẫn có thể chỉ cho tôi hướng đi đúng đắn về lý do tại sao điều này xảy ra với tôi (chrome của khách hàng của tôi cũng vậy. đây có thể là nguồn gốc của Chrome / OSX nếu John đang sử dụng windows)