插入框陰影輸入域

Question

插入陰影框可以在輸入域中工作嗎？

的jsfiddle：http://jsfiddle.net/hKTq2/

Answer 1

是的，這是我正在研究前些日子，這確實是可能的。

input 
{ 
    box-shadow:inset 0 0 5px 5px #888; 
    background: #fff; 
} 

你只需要有一個背景的影子將下降到:)

http://jsfiddle.net/Kyle_/ZCq6w/

Answer 2

是的，你需要添加：

background-color:transparent; 

Answer 3

Hi加這個CSS，那麼你可以插入陰影

.innershadow{ -moz-box-shadow: inset 0 0 5px 5px #888; -webkit-box-shadow: inset 0 0 5px 5px#888; box-shadow: inset 0 0 5px 5px #888; height:15px; background-color:transparent; height:50px} 

Answer 4

剛上添加類background:none;.innershadow

http://jsfiddle.net/jack_fiddle/hKTq2/6/

Answer 5

你可以做像這樣的東西來實現文本輸入內的嵌入式陰影：

.innershadow { 
    font-size: 16px; 
    color: #999; 
    padding: 6px; 
    -moz-box-shadow:inset 2px 2px 5px #888; 
    box-shadow:inset 2px 2px 5px #888; 
    border: 1px solid #b8b8b8; 
} 

HTH，

--hennson

Answer 6

在此期間，這已成爲一種常見的，雖然這是我的 「完美的插圖輸入」。

input { 
 
    background: #fff; 
 
    color: #525865; 
 
    border-radius: 4px; 
 
    border: 1px solid #d1d1d1; 
 
    box-shadow: inset 1px 2px 8px rgba(0, 0, 0, 0.07); 
 
    font-family: inherit; 
 
    font-size: 1em; 
 
    line-height: 1.45; 
 
    outline: none; 
 
    padding: 0.6em 1.45em 0.7em; 
 
    -webkit-transition: .18s ease-out; 
 
    -moz-transition: .18s ease-out; 
 
    -o-transition: .18s ease-out; 
 
    transition: .18s ease-out; 
 
} 
 
input:hover { 
 
    box-shadow: inset 1px 2px 8px rgba(0, 0, 0, 0.02); 
 
} 
 
input:focus { 
 
    color: #4b515d; 
 
    border: 1px solid #B8B6B6; 
 
    box-shadow: inset 1px 2px 4px rgba(0, 0, 0, 0.01), 0px 0px 8px rgba(0, 0, 0, 0.2); 
 
} 
 
body { 
 
    background: #fff; 
 
    margin: 20px; 
 
}

<input type="text" />