1

Если элемент находится в div'е, которому задан overflow: hidden, то box-shadow начинает вести себя неправильно.

jsFiddle

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 и тогда тень появляется как надо, но не хотелось бы решить это так.

jsFiddle

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>

Что-то ещё.

Есть идеи, как решить это без использования отступов?

1 ответ 1

2

overflow: hidden - Отображается только область внутри элемента, остальное будет скрыто

вместо overflow: hidden в данном случае лучше использовать clearfix - для отмены обтекания

http://jsfiddle.net/asxxmubL/

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

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 {}
.l {float: left; margin-right: 10px}
<div class="o clearfix">
    <div class="l">
        <input type="text">
    </div>
        
    <div class="l">
        test
    </div>
</div>

3
  • кривое решение. Стоит добавить текст после div и он не там, где нужно. С overflow такого не было. jsfiddle.net/Ls2qcj7o/1
    – ModaL
    5 мая 2015 в 12:08
  • так? jsfiddle.net/b0frjwhu
    – soledar10
    5 мая 2015 в 12:13
  • ага. Спасибо огромное.
    – ModaL
    5 мая 2015 в 12:16

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.