Styling nhập văn bản CSS

Question

tôi đang cố gắng để tạo ra văn bản đầu vào như bên dưới hình ảnh:

Trước tiên tôi sử dụng CSS3 với sự giúp đỡ như this fiddle. vì các vấn đề với trình duyệt cũ mà tôi đã truy cập không sử dụng CSS3. Bây giờ tôi có mã như thế này:

input[type=text] 
{ 
    color: #979797; 
    height: 28px; 
    padding-left: 10px; 
    text-decoration: none; 
     background-image: url('Pictures/Input-BG.png'); 
    background-repeat: repeat-x; 

} 
    <input id="txtScrictAddress" value="Your Adress (required)" type="text" /> 

Input-BG.png là hình ảnh này:

và here là kết quả.

1. Tôi đã cắt hình ảnh đầu vào phải không?
2. Đầu vào có màu đường viền trái, Kiểu đầu vào trong css giống như hình ảnh như thế nào?

Answer 1

Bạn chỉ cần đặt bán kính đường viền và đường viền thành không. Và chỉnh sửa hình ảnh của bạn để điều tối cũng ở bên trái.

input[type=text] 
{ 
    color: #979797; 
    height: 28px; 
    padding-left: 10px; 
    text-decoration: none; 
    background-image: url('http://i.stack.imgur.com/pbpVI.png'); 
    background-repeat: repeat-x; 
    border-radius: 5px; /*up to date browsers support this, but you can add prefixes if you want*/ 

    border: 0; 
} 

http://jsfiddle.net/TGzng/8/

Answer 2

nếu bạn muốn sử dụng hình ảnh để có điều gì đó mà cả hai đầu đều khác nhau, bạn sẽ cần ít nhất 2 hình ảnh để có được điều đó. cố gắng tìm kiếm "sliding doors input css". có thể this topic on SO sẽ giúp bạn (nhưng có một triệu ví dụ khác ra in the web và trên Stackoverflow).

Answer 3

Bạn cần phải thêm bán kính đường viền để làm tròn các cạnh. Điều này sẽ không làm việc trước IE8 mặc dù.

input[type=text] 
{ 
    color: #979797; 
    height: 28px; 
    padding-left: 10px; 
    text-decoration: none; 
     background-image: url('http://i.stack.imgur.com/pbpVI.png'); 
    background-repeat: repeat-x; 
    border:1px solid #777; 
    border-radius:5px 
} 

Để cắt hình ảnh, cách dễ dàng để lấy phần bóng bên trái có nghĩa là bạn cần có hình ảnh rất rộng cho nền. Hoặc làm điều đó cửa trượt điều người khác đề nghị.