Search code examples
htmlcsshtml-input

How to add button inside an input

Using HTML and CSS, how do I visually place a button inside an input element as shown below?

password input

The user should be able to interact with the input as normal. The text shouldn't go behind the button, even when it's long. Focus should work correctly. The form should be accessible and work correctly in screen readers. The whole component should be styleable with CSS, and should be able to easily resize to fit the space available.

How do I accomplish this with modern CSS?

Solution

  • 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/