CSS：舍入文本輸入字段

如何使用css來舍入舍入文本輸入字段？CSS：舍入文本輸入字段

感謝

2010-07-07 aneuryzm

雖然下面的答案中的幾個工作使用CSS3的答案可能是今天的Web標準更強大的解決方案。現在大多數瀏覽器都支持CSS3。 – ScottyG 2017-04-25 22:09:02

這兩個答案都是正確的，你既可以使用CSS3樣式（這是不是真的與支持當前的IE），或者你可以使用一個JavaScript包，如http://www.malsup.com/jquery/corner/。

然而，還有另一種選擇，即使它不完全理想，也不應放棄。如果你輸入的固定長度的你也能得到你想要的任何背景（包括邊框）爲您投入的圖像，並使用

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

這有工作在幾乎你能想到的所有瀏覽器的好處。

2010-07-07 09:42:19

嗨，你建議的插件很酷，我使用它的div。但是，恐怕它不適用於文本輸入字段...任何提示？ – aneuryzm 2010-07-07 16:08:50

只需將你的輸入封裝在div中？ – 2010-07-08 07:59:14

不，它不起作用。該包裝被修改，但它只是放在它後面.. – aneuryzm 2010-07-08 09:50:47

隨着CSS3：

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

2010-07-07 09:36:01 Sarfraz

2010-07-07 09:36:08 KPM

在現代CSS3瀏覽器

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

中老年，你需要使用一個JS像jQuery的rounded corners插件或Ruzee

2010-07-07 09:37:19 helle

也許你可以從輸入字段中刪除的輪廓，然後用jQuery把它們彎曲的盒子裏......

2010-07-07 09:40:22 rabidmachine9

^最後一個將適用於所有瀏覽器。但是有些瀏覽器添加了輪廓！ Chrome瀏覽器，Safari瀏覽器等。

我知道你可以使用outline：0關閉chrome中的輪廓，但是我沒有辦法找到你可以在Safari中關閉輪廓的地方。它會看起來很醜陋！

2010-07-07 09:46:19 nick

-1

使用border-radius根據您的佈局使用像素。

2017-03-04 10:16:34

您應該添加一個解釋其工作原理的示例。 – Mike 2017-03-04 10:52:47

'border-radius：2px; ' – 2017-03-05 11:52:29

回答