如何在文本字段中插入按钮（附图像）

Question

在我的表单中，我有一个禁用的文本字段，其值是一个数字，例如价格，所以我想在此字段内部或上方添加提交按钮，以生成类似这样的图像：

      <input name="" type="text" maxlength="50" value="£0.00" id="" disabled>
      <button value="submit">Submit</button>

Answer 1

您实际上不需要在输入中包含提交按钮，您只需要使其显示为..

您需要做的是将两个元素正确地放在彼此旁边，然后将它们设置为使它们一起显示的方式。

为了获得彼此相邻的元素，您可以使用各种css技术，例如display: inline-block;，它们将元素内联（在彼此旁边，在同一“行”上），同时保持块元素的属性。或者，如果要围绕元素包装容器，可以使用float定位元素，或display: table-cell;容器内的display: table;。 （除此之外还有更多方法，如果你想再研究一下！）

至于样式，特别是在你的示例图像中，这种效果可以通过仅在每个元素的外角上使用边框半径来实现，使内部的方形相互齐平，然后围绕外部边界边缘使它们看起来像一个。同样，如果你有一个容器元素，你可以设置它的样式以在外边缘上创建效果，然后单独设置输入和按钮的样式。

Answer 2

不要真正理解你想要完成的事情。 如果您希望隐藏文本字段（以便提交按钮替换文本字段的位置），那么您应该使用type =“hidden”而不是disabled。你可以将两个元素放在一个div中，如果你只想将它们显示在彼此旁边并设置（在css中）宽度和float：left。如果您坚持将按钮放在文本字段上，则可以将按钮的位置设置为绝对（在包含div中）。

Answer 3

您主要只需要对输入和容器进行边界半径以使其正确显示。关键的设计是：

div.radius {
    width:100px;
    border-radius:10px;
    background:gainsboro;
    overflow:hidden;

}
div.radius input[type='text']{
    display:inline-block;
    float:left;
    width:70%;
    box-shadow:inset 0px 3px 5px 0px rgba(25,25,25,0.3);
    -webkit-border-top-left-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border:0;
    margin:0
}

请查看演示以查看一个小实现示例。您可以使用一些模块化元素来剪切代码以及实现规范化。让我知道是否还有其他事情：）

<强>样本

http://jsfiddle.net/B6N5Q/1/

编辑

使用禁用文字更新了jsfiddle。