Может ли теневая тень работать в поле ввода?
JsFiddle: http://jsfiddle.net/hKTq2/
Может ли теневая тень работать в поле ввода?
JsFiddle: http://jsfiddle.net/hKTq2/
Да, это то, над чем я работал на днях, это действительно возможно.
input
{
box-shadow:inset 0 0 5px 5px #888;
background: #fff;
}
Вам просто нужно установить фон для того, чтобы тень упала на:)
Тем временем это стало общим, хотя здесь мой "идеальный ввод вставки".
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" />
Да, вам нужно добавить:
background-color:transparent;
Привет ADD этот 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}
Просто добавьте background:none;
в класс .innershadow
вы могли бы сделать что-то подобное, чтобы реализовать вставку dropcase внутри текстового ввода:
.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;
}
НТН,
- hennson