Работа с полями формы может быть немного сложной при создании отзывчивой темы для веб-сайта. Вы можете кодировать свой CSS для каждого устройства или ширины браузера, что может привести к большому количеству лишнего или избыточного кода, или вы можете использовать эту простую технику. Когда большинству людей требуется ответное текстовое поле ввода, они обертывают его в div.
Есть более сжатый способ:
HTML
Код
<div class="setonsiva_desamob"><input type="text" class="bronivesam"></div>
CSS
Код
.setonsiva_desamob {
margin: 0 auto;
max-width: 800px;
padding: 45px 25px;
}
.bronivesam {
-webkit-appearance: none;
-moz-appearance: none;
font: 15px/1 'Open Sans', sans-serif;
color: #2f2d2d;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
width: 100%;
max-width: 475px;
background-color: #f1eeee;
padding: 12px 15px 12px 15px;
border-radius: 7px;
box-shadow: none;
outline: none;
margin: 0;
box-sizing: border-box;
border: 1px solid #bdbfc3;
}
Значение width всегда должно быть 100%, в то время как max-width может быть что угодно, где значение box-sizing должно быть border-box.
Демонстрация
