How can I make textarea border the same as text input border?

Question

I would like to have the textarea fields in my form appear the same as the text input fields, cross-browser. And I don't want to be forcing a custom style - I would like to just use whatever the standard style is within the user's browser.

So I know I could use

textarea {
    border-style: inset;
    border-width: 2px;
}

and then they would match in Chrom[e,ium], but then they don't match on Firefox/Iceweasel, for example.

So is there a straightforward way to say to the browser "please render textarea elements with whatever border you are using for input[type="text"]"?

Answer 1

The answer to the actual question posed is: No, there is no way to say "make this element look like this one." However, you can make them look consistent by applying the same style to both the textarea and the input. Though, in some browsers certain things look a certain way and there is no way around it.

input[type=text], textarea {
    border-style: inset;
    border-width: 2px;
}

Other input types besides "text" were introduced in HTML5.For instance there are the "password", "number", and "email" input types that look like "text" inputs but have special behaviors. To make all of them look consistent, you will need to provide definitions for each input type in your css.

input[type=text], input[type=password], input[type=email], input[type=number], textarea    {
    border-style: inset;
    border-width: 2px;
}

For a full list of the possible input types, here is a reference.

Answer 2

The accepted answer is correct, but a little bit dated now. As an alternative to setting the border-style, border-color, and border-width you can have the controls keep their native look by using appearance, with its prefixes:

input[type="text"],
textarea {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

That will ensure your text areas and text field match (*in a few browsers). If you like the textarea look better, you can do the same but with the value textarea instead.

All of the caveats with using prefixes apply.

Answer 3

input[type=text], textarea {
    border-style: inset;
    border-width: 2px;
}