Hình bóng hộp inset cho inputfield

Question

Có thể một bóng đổ vào hộp làm việc trên đầu vào không?

JsFiddle: http://jsfiddle.net/hKTq2/

Answer 1

Có, đây là điều mà tôi đã làm việc trên ngày khác, nó thực sự là có thể.

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

Bạn chỉ cần có một nền tảng thiết cho bóng rơi vào :)

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

Answer 2

Có bạn cần phải thêm:

background-color:transparent; 

Answer 3

Hi ADD css này thì bạn có thể chèn shadow

.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

Chỉ cần thêm background:none; trên lớp .innershadow

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

Answer 5

bạn có thể làm một cái gì đó như thế này để nhận ra một dropshadow inset bên trong văn bản-đầu vào:

.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

Trong khi đó, điều này đã trở thành một phổ biến, mặc dù đây là của tôi "đầu vào hình chữ nhật hoàn hảo".

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