CSS: các trường nhập văn bản được làm tròn

Question

Tôi làm cách nào để tạo các trường nhập văn bản được làm tròn bằng css?

nhờ

Answer 1

Cả hai câu trả lời là chính xác bạn có thể sử dụng phong cách CSS3 (mà không thực sự ủng hộ với IE hiện tại) hoặc bạn có thể sử dụng gói javascript chẳng hạn như http://www.malsup.com/jquery/corner/.

Tuy nhiên, có một tùy chọn khác không được bỏ mặc dù nó không chính xác lý tưởng. Nếu đầu vào của bạn có chiều dài cố định, bạn cũng có thể rút ra bất cứ điều gì nền (bao gồm biên giới) mà bạn muốn cho đầu vào của bạn thành một hình ảnh và sử dụng

background: transparent url(pathToYourImage.png); 
border: none; 

này có lợi ích của làm việc trên khá nhiều tất cả các trình duyệt, bạn có thể nghĩ đến.

Answer 2

Với CSS3:

/* css 3 */ 
border-radius:5px; 
/* mozilla */ 
-moz-border-radius:5px; 
/* webkit */ 
-webkit-border-radius:5px; 

Answer 3

Hãy thử một cái gì đó như thế này: http://hannivoort.org/test/InputRoundedCorners.asp

Answer 4

trong các trình duyệt hiện đại css3

-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
border-radius: 5px; 

ở cũ hơn, bạn sẽ cần phải sử dụng một JS như jquery với rounded corners plugin hoặc Ruzee

Answer 5

Có lẽ bạn có thể loại bỏ các phác thảo từ các lĩnh vực đầu vào và sau đó với jQuery đặt chúng bên trong một hộp cong ...

Answer 6

^cái cuối cùng sẽ hoạt động trên tất cả các trình duyệt. Tuy nhiên, một số trình duyệt thêm đường viền! Chrome, safari, v.v.

Tôi biết bạn có thể tắt đường viền bằng chrome sử dụng đường viền: 0, nhưng không có cách nào tôi tìm thấy nơi bạn có thể tắt đường viền trong Safari. Nó sẽ trông ghê tởm trong đó!

Answer 7

Sử dụng border-radius sử dụng pixel theo bố cục của bạn.