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 40px; /* equal to negative input's margin for mimic normal `div` box-sizing */
/* demo only customizations */
background: red;
}
input {
width: 100%; /* force to expand to container's width */
padding: 5px 00px;
border: none;
margin: 0 -40px; /* negative margin = border-width + horizontal padding */
/* demo only customizations */
border-radius: 14px;
}