html - 在 CSS 中将提交按钮作为表单的扩展

Question

这就是我的表单/提交按钮当前的样子:

当然，我希望“Go”按钮能够更好地集成到表单的其余部分中，以便它看起来像一个无缝扩展。这意味着右侧将具有边界半径，而左侧将保持笔直。此外，按钮的顶部和底部必须与表单的顶部和底部完美对齐。

对此有什么帮助吗？我一直在摆弄，这就是我到目前为止在代码方面所想出的:

input {
    display: inline;
}

input.button {
    margin-left: -9px; 
    border: none;
    background-color:#FA8801;
    border-radius-right: 2px !important;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family: Open Sans !important;
    font-weight: 100 !important;
    font-size:17px;
    padding:7px 5px;
    text-decoration:none !important;
    font-family: inherit;
}

/*This is the styling for the form, not the button from here and on... */
input[type=email] {
    padding: 5px !important; 
    border: 2px solid #FFFFFF; 
    -webkit-border-radius: 2px !important;
    border-radius: 5px !important;
    font-family: inherit;
    font-weight: 100 !important;
} 
input[type=email]:focus { 
    border: 2px solid #FA8801; 
    outline: none; 
}
input[type=email]:focus::-webkit-input-placeholder { 
    color:transparent; 
}

还有 JSFiddle:http://jsfiddle.net/wfhLnsez/

Answer 1

使用border-top-right-radius和border-bottom-right-radius来定位各个 Angular 。

我建议在您的输入框上放置一个行高，这将为您提供“开始”提交按钮所需的高度。然后，您需要填充这些元素的左侧和右侧，因为您已经有了高度。

input.button {
    border-top-right-radius: 5px; /* to match border-radius on input box */
    border-bottom-right-radius: 5px;
    height: 30px; /* to match height of input box */
    padding: 0 5px;
}

input[type=email] {
    line-height: 30px; /* height of input box */
    padding: 0 5px; /* nothing on top and bottom, 5px on left and right */
}

我注意到您的 input[type=email] 上有冲突的属性!important。

-webkit-border-radius: 2px !重要; 边框半径:5px!重要；

对于初学者，请尽最大努力避免使用 !important，因为编写良好的 CSS 不需要它们。对于同一属性，您有 2 个不同的值 2px 和 5px。它们应该是相同的。另外，当您这样做时，您应该为这些类型的样式添加第三个前缀，因此它应该是:

-webkit-border-radius: 5px;
   -moz-border-radius: 5px;
        border-radius: 5px;