Если элемент находится в div'е, которому задан overflow: hidden
, то box-shadow начинает вести себя неправильно.
input {
background: #ffffff;
border: 1px solid #cccccc;
outline: none;
width: 50px;
height: 20px
}
input:focus {
border: 1px solid #45749d;
-webkit-box-shadow: 0px 0px 6px #588bb7;
-moz-box-shadow: 0px 0px 6px #588bb7;
box-shadow: 0px 0px 6px #588bb7;
}
.o {
overflow: hidden
}
.l {
float: left;
margin-right: 10px
}
<div class="o">
<div class="l">
<input type="text">
</div>
<div class="l">
test
</div>
</div>
Что-то ещё.
Есть вариант, использовать padding
и тогда тень появляется как надо, но не хотелось бы решить это так.
input {
background: #ffffff;
border: 1px solid #cccccc;
outline: none;
width: 50px;
height: 20px
}
input:focus {
border: 1px solid #45749d;
-webkit-box-shadow: 0px 0px 6px #588bb7;
-moz-box-shadow: 0px 0px 6px #588bb7;
box-shadow: 0px 0px 6px #588bb7;
}
.o {
overflow: hidden;
padding: 6px
}
.l {
float: left;
margin-right: 10px
}
<div class="o">
<div class="l">
<input type="text">
</div>
<div class="l">
test
</div>
</div>
Что-то ещё.
Есть идеи, как решить это без использования отступов?