嵌入框陰影不起作用

-1

我想獲得在Chrome中的輸入字段上工作的內部陰影。不幸的是，到目前爲止，這並不成功。您可以在這裏查看的jsfiddle：http://jsfiddle.net/XgsPT/2/嵌入框陰影不起作用

我的CSS：

input { 
margin-top: 15px; 
margin-left: 15px; 
-moz-box-shadow: inset 0 0 10px #000000; 
-webkit-box-shadow: inset 0 0 10px #000000; 
box-shadow:   inset 0 0 10px #000000; 
}

而這個簡單的HTML：

<input type="text" width="30">

，但似乎沒有影子...（鉻24）

來源

2013-02-10 Bastiaan Zwanenburg

input的背景顏色混亂了。退房this updated fiddle，這種變化的CSS：

input { 
    /* ... rest as before ...*/ 
    background-color: transparent; 
}

來源

2013-02-10 10:29:18 Jeroen

，而不是設置背景給它透明設置爲白色，或任何顏色，你喜歡，你只需要聲明它，然後它會工作，因爲它應該

來源

2013-02-10 12:44:01 Jan

基本上，WebKit不允許我們添加框陰影來形成具有本機外觀的控件。我們需要刪除nativa外觀。

input { 
    -webkit-appearance: none; 
    box-shadow: inset 0 0 10px #000000; 
}

此外，一些CSS屬性（如邊框和背景）暗示-webkit-appearance：none。

來源

2013-02-10 17:12:01

爲輸入字段添加邊框，最後，方塊陰影將起作用。

http://jsfiddle.net/Jx8xF/

input { 
    margin-top: 15px; 
    margin-left: 15px; 
    -moz-box-shadow: inset 0 0 10px #aaa; 
    -webkit-box-shadow: inset 0 0 10px #aaa; 
    box-shadow:   inset 0 0 10px #aaa; 
    border: 1px solid #aaa; 

}

來源

2013-02-25 16:41:09 grvpanchal

真棒！在這方面遇到困難 – 2013-11-12 19:19:37

嵌入框陰影不起作用

回答

相關問題