How to inset a button in the text field (image attached)

Question

In my form I have a disabled text field which its value is a number e.g price, So I would like to add the submit button inside or over this field, to make something like this image:

enter image description here

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

Have you tried something like this http://stackoverflow.com/questions/15314407/how-to-add-button-inside-input? — sushain97, Oct 03 '13 at 00:24

score 0 · Answer 1 · answered Oct 03 '13 at 00:41

You do not actually need to have the submit button inside of the input, you merely need to make it appear so..

What you need to do is position the two elements right up beside each other, and then style them in a manner that will make them appear together.

To get elements beside each other you can use various css techniques such as display: inline-block;, which places elements inline (beside each other, on the same 'line') while maintaining the properties of a block element. Or, if you want to wrap a container around the elements, you can use float to position the elements, or display: table-cell; inside of a display: table; container. (There are more ways than this too, if you want to look into it some more!)

As for the styling, in your example image in particular, this effect can be achieved by using border radius only on the outer corners of each element, leaving the inner ones square and flush with each other, and then borders around the outer edges to make them appear as one. Again, if you have a container element, you can style it to create the effects on the outer edges, and then individually style the input and button as well.

score 0 · Answer 2 · answered Oct 03 '13 at 00:42

Don't really understand what you want to accomplish. If you want the textfield to be hidden (so the submit button replaces the place of the textfield) then you should use type="hidden" instead of disabled. you could put both elements in a div if you just want to display them next to each other and set (in css) a width and float:left. And if you insist to put the button over the textfield you could put the position of the button absolute (within a containing div).

score 0 · Accepted Answer · answered Oct 03 '13 at 00:42

You mainly just need to border radius the input and the container to get it to look correctly. The key stylings are:

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
}

Please look at the demo to see a small example of implementation. You can cut the code with some modularizing of elements as well as implementing a normalize. Let me know if theres anything else :)

DEMO

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

EDIT

updated jsfiddle with disabled text.

How to inset a button in the text field (image attached)

3 Answers3