将提交按钮作为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定位各个角落。

我建议在输入框上加一个行高，这样就可以为你的＆＃34; Go＆＃34;提供所需的高度。提交按钮。那么你只需要看到已经有高度的东西，就需要填充这些元素的左右两边。

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 */
}

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

-webkit-border-radius: 2px !important; border-radius: 5px !important;

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

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

Answer 2

我认为这更接近你想要的东西： jsfiddle

一些亮点：

• 边界半径，您需要使用所有浏览器的CSS：

  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-radius-topright: 5px;
  -moz-border-radius-bottomright: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  

• 我还更改了填充以使按钮的高度更接近输入的高度：

  padding-left:4px;
  padding-right:4px;
  padding-top: 1px;
  padding-bottom: 6px;
  

• 最后，我将按钮移到一个像素上以覆盖输入边界半径的其余部分：

  margin-left: -10px; 
  

希望这有帮助！