造型文本与造型按钮

Question

如果我设置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/

Answer 1

一种解决方案是设置line-height而不是高度：

＆＃13;

＆＃13;

body {
    background: red;
}
input {
    border: 0;
    line-height: 50px;
    padding: 0 10px 0 10px;
    height: 50px;
}

＆＃13;

<input type="text" value="foobar"/>
<input type="button" value="foobar"/>

＆＃13;

＆＃13;

＆＃13;

修复：在其他浏览器上测试后发现问题。您必须使用特定的padding，例如padding: 0 10px;（顶部和底部必须为0）

Answer 2

某些html元素（如输入类型按钮）在浏览器中具有预定义的样式。其中，这导致输入类型按钮以具有box-sizing: border-box。强制执行此操作为box-sizing: content-box，因此您的css将如下所示：

body {
    background: red;
}

input {
    border: 0;
    height: 20px;
    padding: 10px;
    box-sizing: content-box;
}

Answer 3

大小不同，因为垂直填充不会添加到按钮的大小，但会添加到文本框的大小。您可以使用height和line-height来设置文字的高度和垂直位置。

对齐关闭，因为默认情况下它们具有不同的垂直对齐方式。如果指定垂直对齐，它们将平等对齐。

input {
    vertical-align: bottom;
    border: 0;
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
}

演示：http://jsfiddle.net/Guffa/kx7wzufr/

Answer 4

由于浏览器的默认样式。给他们不同的课程和风格。

Answer 5

您可以为文本输入字段和输入按钮分配两个不同的类，然后相应地设置它们，请检查：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;
}

Answer 6

每个浏览器都提供输入特殊样式。如果您查看Chrome开发人员工具并向下滚动一下，您会看到下面的内容。您必须通过添加类或使用输入[type =“button”]来覆盖这些样式：

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;
}