Создал небольшой демо-пример:
.block {
width: 80%;
height: 30px;
background: lime;
}
.block .edit {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
list-style-type: none;
}
.block .edit li {
width: 50%;
height: 100%;
margin-left: 75px;
padding: 0px;
background: orange;
}
.block .edit li input[type='text'] {
position: relative;
width: 50%;
height: 100%;
margin-left: 10px;
}
.block .edit li input[type='text']:after {
content: '';
position: absolute;
left: 0px;
top: 0px;
width: 50px;
height: 50px;
border: 1px solid red;
background: green;
}
<div class='block'>
<ul class='edit'>
<li><input type="text"></li>
</ul>
</div>
Возникло 3 вопроса:
почему поле для ввода текста по высоте не стало таким же, как родительские элементы (я же поставил
height: 100%
)почему для
<input>
не отображается:after
, когда для остальных отображается, как побороть эту проблему?можно ли отрисовать дочерний
div
, которому задать толькоborder
, сделавbackground: transparent
и сделать так, чтобы нажатие на этот элемент не обрабатывалось, а нажимались элементы ниже (и все с помощью css)