Как автоматически изменить размеры полей ввода в форме?

Я пытаюсь сделать свою регистрационную форму отзывчивой для мобильных устройств, но у меня возникла небольшая проблема с изменением размера полей ввода,

Я сделал jsfiddle, чтобы показать ситуацию: https://jsfiddle.net/ntvrhLpe/

Мне бы хотелось, чтобы, если ширина была меньше 540 пикселей, поля ввода автоматически менялись до полной ширины с полем 10 пикселей с обеих сторон.

Я уже пробовал некоторые вещи, но ничего не работает:

input[type=text], input[type=password], input[type=email]{
margin-left:10px;
margin-right:10px;
width:100%;
}

Кто-нибудь может мне помочь?

Источник

2 ответа

Решение

Ваш начальный CSS для ввода

input[type=text], input[type=password], input[type=email] {
    font-size: 20px;
    margin-bottom:10px;
    padding: 8px 6px;
    height: 38px;
    width:250px;
    box-sizing: border-box;
}

Тогда в вашем медиа-запросе:

input[type=text], input[type=password], input[type=email] {
    margin-left: 0px;
    margin-right: 0px;
    width: 100%;
}

fieldset {
    padding: 10px;
}

Ты получишь это

Вы должны получить удовлетворение

Источник

Вы не установили ширину вашего css (это не было в скрипке, хотя вы упомянули об этом в своем вопросе!)

Пожалуйста, смотрите https://jsfiddle.net/rwbLmex2/

@media (max-width: 540px) {
label {
    text-align:left;
    width:180px;
    float:left;
    margin-top:10px;
    margin-left:20px;
} 
input[type=text], input[type=password], input[type=email]{
    margin-left:10px;
    margin-right:10px;
    width : 100%
}
}

Кстати, я рекомендую использовать CSS-фреймворк, такой как bootstrap, который обрабатывает все это за вас!

Источник
Другие вопросы по тегам