0

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

在此处输入图像描述

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

3 回答 3

0

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

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

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

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

于 2013-10-03T00:41:55.833 回答
0

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

于 2013-10-03T00:42:12.990 回答
0

您主要只需要为输入和容器设置边界半径即可使其看起来正确。主要样式是：

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。

于 2013-10-03T00:42:27.087 回答