Q

圍繞輸入元素的模糊輪廓的CSS

2011-03-13 87 views 5 likes

5

我知道的可能的輪廓樣式如下所示。圍繞輸入元素的模糊輪廓的CSS

點綴
虛線
固體
雙
槽
脊
插圖
首先

這些都沒有提供如下所示的輸入元素的輪廓： input element as seen in Google Chrome
用什麼CSS樣式可以讓某人輸入樣式如上所示？

2011-03-13 Web_Designer

+0

它看起來像Chrome內置的渲染輸入框先用含有像一個新的類包裝在一個跨度。它會在其他瀏覽器中呈現不同的效果。 – 2011-03-13 22:24:51

+0

爲什麼不使用divs呢？ – yoda 2011-03-13 22:25:10

+1

@yoda：因爲'div'並不是一個輸入框......？ – BoltClock 2011-03-13 23:59:49

A

回答

4

它看起來像一個瀏覽器的默認行爲，但你可以用CSS3僞造它box-shadow

http://jsfiddle.net/meo/BndwU/

或與您的顏色： http://jsfiddle.net/meo/BndwU/1/

或獎金焦點動畫： http://jsfiddle.net/meo/BndwU/2/

2011-03-13 22:24:31 meo

+0

如果這是通過box-shadow效果完成的，那麼當您將大綱設置爲none時，沒有;然後它刪除假設的「箱子陰影」 – 2011-03-13 22:35:31

+0

好，然後嘗試大綱：繼承。我認爲它的瀏覽器默認大綱。（爲鉻或Safari）祕密提示：使用您的瀏覽器dom檢查員，看看它是如何完成的。 – meo 2011-03-13 22:38:47

3

這隻適用於接受CSS3屬性的現代瀏覽器，如box-shadow：

input[type="text"] { 
    background:white; 
    border:1px solid #ffcc00; 
    box-shadow:0 0 3px #ffcc00; 
    -moz-box-shadow:0 0 3px #ffcc00; 
    -webkit-box-shadow:0 0 3px #ffcc00; 
}

See example →

2011-03-13 22:29:17 mVChr

0

使用新的CSS 3的box-shadow，你可以把一個漸變邊框的輸入框。

.coolio { 
    box-shadow:rgba(0,0,0,0.5) 0px 0px 24px; 
}

這裏是一個工作示例：Gradient Shadow Outline Demo

2011-09-21 21:42:36

相關問題