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

Question

在我的表单中，我有一个禁用的文本字段，它的值是一个数字，例如价格，所以我想在该字段内部或上方添加提交按钮，以制作类似于此图像的内容：

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

Answer 1

您主要只需要为输入和容器设置边框以使其看起来正确。关键样式是：

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。

Answer 2

并不真正了解您想要完成什么。 如果您希望隐藏文本字段（因此提交按钮替换文本字段的位置），那么您应该使用 type="hidden" 而不是禁用。如果您只想将它​​们彼此相邻显示并设置（在css中）宽度和浮动：左，则可以将两个元素放在一个div中。如果您坚持将按钮放在文本字段上，您可以将按钮的位置放在绝对位置（在包含的 div 内）。

Answer 3

您实际上不需要在输入中包含提交按钮，您只需要让它看起来如此......

您需要做的是将两个元素并排放置，然后以使它们一起出现的方式设置它们的样式。

要让元素彼此并排，您可以使用各种 css 技术，例如 display: inline-block;，它将元素内联（彼此并排，在同一“行”上），同时保持块元素的属性。或者，如果你想在元素周围包裹一个容器，你可以使用float 来定位元素，或者在display: table; 容器内使用display: table-cell;。 （还有比这更多的方法，如果你想进一步研究的话！）

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