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"]"?

Perhaps you can specify one rule for textarea and input `input[type="text"], textarea { ... }` if you want it to look exactly the same — Sergiy T., Jan 14 '13 at 21:08
No. You either specify the properties you want to change or you don't specify the properties you don't want changed. There is no "make this thing look like this other thing that uses the browsers default styling" — cimmanon, Jan 14 '13 at 21:10

Jeffrey Ray · Accepted Answer · 2014-12-03T02:16:41.570

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.

I feared that may be the case. But I guess it's the situation is that the user is going to be most accustomed to their browser's styles, so micro-managing like I am suggesting is a silly idea anyway. — lxop, Jan 14 '13 at 21:26

score 4 · Answer 2 · answered Jul 26 '16 at 23:31

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.

score 1 · Answer 3 · answered Jan 14 '13 at 21:09

1

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

answered Jan 14 '13 at 21:09

Willem Ellis

4,886
7
38
55

1

I want to know if there's a solution that doesn't involve forcing a custom style like this. – lxop Jan 14 '13 at 21:16
Ah I see what you mean now. My fault. – Willem Ellis Jan 14 '13 at 21:16
No worries. I'm getting the impression that @cimmanon's comment is going to be the answer to this – lxop Jan 14 '13 at 21:17
1

In that case, have a look at this answer. http://stackoverflow.com/a/1065476/392271. That's the closest way I know how to do this. – Willem Ellis Jan 14 '13 at 21:18
Very interesting, thanks. I'm not sure if LESS would work with user-agent stylesheets though, but very useful to know for other situations. – lxop Jan 14 '13 at 21:24

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

3 Answers3