I am trying to achieve this:
I just want to show a button inside an input element just like the above image
The easiest way to add an input box with a clear button is to add an input element with the type attribute set to search . Then when we type into the input box, we see the clear button displayed. And we can click on it to clear its value.
No, you cannot have any element contained within an <input> element. It is an empty (void) element, and the closing tag must be ommitted. Thus you cannot have any element contained within it.
Wrap both your input and your span inside a container, position this container as relative, and the span as absolute. You can now do whatever you like with the span.
The button isn't inside the input. Here:
input[type="text"] { width: 200px; height: 20px; padding-right: 50px; } input[type="submit"] { margin-left: -50px; height: 20px; width: 50px; }
Example: http://jsfiddle.net/s5GVh/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With