-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">

しかし、影が表示されません... (Chrome 24)

4

4 に答える 4

2

入力フィールドにボーダーを与えると、ボックスシャドウが最終的に機能します。

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-25T16:41:09.260 に答える
1

基本的に、WebKitでは、ネイティブの外観を持つフォームコントロールにボックスシャドウを追加することはできません。nativaの外観を削除する必要があります。

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

また、borderやbackgroundなどの一部のCSSプロパティは、-webkit-appearance:noneを意味します。

于 2013-02-10T17:12:01.973 に答える
1

の背景色inputがめちゃくちゃです。CSS に次の変更を加えた、この更新された fiddleを確認してください。

input {
    /* ... rest as before ...*/
    background-color: transparent;
}
于 2013-02-10T10:29:18.320 に答える
0

背景を透明に設定するのではなく、白または好きな色に設定するだけで、宣言するだけで正常に機能します

于 2013-02-10T12:44:01.723 に答える