input 100% with by Vladimir Starkov @matmuchrapna
HTML
<div class="input_wrap">
<input type="text" />
</div>
CSS
/*
* input 100% with by Vladimir Starkov @matmuchrapna
*/
div {
padding: 6px 17px; /* equal to negative input's margin for mimic normal `div` box-sizing */
/* demo only customizations */
background: red;
}
/**
* input 100% with by Vladimir Starkov @matmuchrapna
*/
input {
width: 100%; /* force to expand to container's width */
height:40px;
border: 7px solid #DFDFDF;
padding: 0 10px;
margin: 0 -17px; /* negative margin = border-width + horizontal padding */
/* demo only customizations */
border-radius: 14px;
box-shadow: 0 0 5px green inset;
}