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.