Если i style input, тогда высота влияет на ввод текста, а затем на кнопку. Почему это? И что можно сделать по этому поводу? (и как дополнительный, почему они не выравнивать?)текст стиля против стиля кнопки
<input type="text" value="foobar"/>
<input type="button" value="foobar"/>
CSS:
body {
background: red;
}
input {
border: 0;
height: 20px;
padding: 10px;
}
http://jsfiddle.net/clankill3r/sxbzav34/
Некоторых HTML элементов, таких как ввод кнопки типа имеет предопределенные стили в браузерах. В частности, это приводит к вводу кнопки типа, чтобы иметь box-sizing: border-box. Принудительно это будет box-sizing: content-box, так что ваш CSS будет выглядеть следующим образом:
body {
background: red;
}
input {
border: 0;
height: 20px;
padding: 10px;
box-sizing: content-box;
}
Я выбрал это как принятый ответ, но я рекомендую также прочитать ответ Алекса Чар. – clankill3r
Из-умолчанию стиль браузеров. Дайте им разные классы и создайте их.
Вы можете назначить два разных класса в поле ввода текста и кнопку ввода, а затем соответствующим образом нарисуйте их, пожалуйста, проверьте это: DEMO.
HTML:
<input class="text" type="text" value="foobar" />
<input class="button" type="button" value="foobar" />
CSS:
body {
background: red;
}
.text {
border: 0;
height: 20px;
padding: 10px;
}
.button {
border: 0px;
padding: 12px 12px 13px 12px;
}
Одно решение установить line-height вместо высоты:
body {
background: red;
}
input {
border: 0;
line-height: 50px;
padding: 0 10px 0 10px;
height: 50px;
}<input type="text" value="foobar"/>
<input type="button" value="foobar"/>Исправление: после тестирования в других браузерах обнаружите проблему. Вы должны использовать конкретные padding, например. padding: 0 10px; (верхняя и нижняя должны быть 0)
странно, когда я пытался это в песочнице, он не работал XD –
Спасибо еще раз за downvote без комментариев. –
Я проголосовал за это, для записи. Я думаю, что ваше предложение здесь является лучшим решением. Если оставить значения пустыми, они будут отображаться неправильно. Это определенно очень странная проблема :) –
Каждый браузер дает вложения специального стиля. Если вы посмотрите на инструменты разработчика Chrome и немного прокрутите список, вы увидите что-то в строках ниже. Вы должны перезаписать эти стили, добавив класс или с помощью ввода [= «кнопки» типа]:
input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button {
align-items: flex-start;
text-align: center;
cursor: default;
color: buttontext;
padding: 2px 6px 3px;
border: 2px outset buttonface;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
background-color: buttonface;
box-sizing: border-box;
}
Размер отличается, потому что вертикальное выравнивание не добавляется к размеру кнопки, но он добавляется к размеру текстового поля. Вы можете использовать height и line-height, чтобы установить высоту и вертикальное положение текста.
Выравнивание выключено, поскольку по умолчанию они имеют разное вертикальное выравнивание. Если вы укажете вертикальное выравнивание, они будут выравниваться одинаково.
input {
vertical-align: bottom;
border: 0;
height: 40px;
line-height: 40px;
padding: 0 10px;
}
Посмотрите на решение по "Alex Чар" ниже. Вы можете увидеть другие ответы для «почему», потому что браузеры применяют свои собственные стили к различным типам элементов. CSS позволяет вам переопределить их, и если явно не указано переопределение стиля, применяется по умолчанию браузер, или он наследуется от родительских контейнеров, если родительский стиль имеет тип, который может быть пропегентом.Примером может быть стиль «line-height». –