How to properly style a text area with inner shadows and scrollbar

Question

I'm putting an inner-shadow on all my controls, inputs and textareas by using the following CSS:

input {
  padding: 7px;
  -webkit-box-shadow: inset 2px 2px 2px 0px #dddddd;
  -moz-box-shadow: inset 2px 2px 2px 0px #dddddd;
  box-shadow: inset 2px 2px 2px 0px #dddddd;
}

and, with some other styling, looks like this (in Firefox, and similar in other browsers):

enter image description here

But the padding that helps separate the content from the inner shadow breaks the textarea around the scrollbar:

enter image description here

and if I remove the padding, the text overlaps the shadow, like this:

enter image description here

I can add padding only to the left, solving the overlap with the left shadow but not with the top shadow, while having the scrollbar look good:

enter image description here

I can also add padding everywhere but on the right side, having the text displayed correctly but the toolbar still looks rather odd:

enter image description here

Is there any way to solve this?

score 20 · Accepted Answer · edited Feb 10 '12 at 10:46

20

Getting the padding property to affect only the content but not the scrollbar is not possible using standard textarea elements. For that you can use a contenteditable DIV. For example, check this fiddle: http://jsfiddle.net/AQjN7/

HTML:

<div class="outer" contenteditable="true">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>

CSS:

.outer {
    -webkit-box-shadow: inset 2px 2px 2px 0px #dddddd;
    -moz-box-shadow: inset 2px 2px 2px 0px #dddddd;
    box-shadow: inset 2px 2px 2px 0px #dddddd;
    height: 200px;
    margin: 10px;
    overflow: auto;
    padding: 7px 10px;
    width: 300px;    
    font-family: tahoma;
    font-size: 13px;
    border: 1px solid #aaa;
}

edited Feb 10 '12 at 10:46

Pablo Fernandez

279,434
135
377
622

answered Jan 17 '12 at 14:45

techfoobar

65,616
14
114
135

I see... oh well... before doing that, I should probably decide whether plain text is ever going to be used, or whether I should go for some rich text editor anyway. Do you know what's the browser support for contenteditable? where is it going to fail? – Pablo Fernandez Jan 17 '12 at 14:48
It has pretty good support in all modern browsers including FF, Chrome as well as IE. However browsers as sick as IE7 can break anything. :) – techfoobar Jan 17 '12 at 14:50
If you want to post the textarea data with a normal html form, data in a contenteditable div won't be posted. It will be with a textarea. Still a neat idea. – timing Jan 17 '12 at 15:58
You can do that by adding a hidden input field and copying the text value from the div prior to submit (i.e onsubmit returning true). – techfoobar Jan 17 '12 at 17:26
This solution worked for me on Chrome and Firefox on Mac OS X as well as IE 9, 8, 7 and even 6. I mean, trying out the look and feel, not sure if it messes up the form for example. – Pablo Fernandez Feb 10 '12 at 10:44
The trouble with contenteditable is that you can copy+paste (or select+drag) arbitrary formatted HTML into it, which is [sometimes a nice feature](http://www.tinymce.com/tryit/full.php), but not if you're trying to replace a plain textarea. – Boann Jul 28 '12 at 04:43

score 0 · Answer 2 · answered Dec 13 '12 at 23:26

0

Additionally - rather than using simply input, which will target buttons, you can target text inputs specifically with

input[type="text"]

answered Dec 13 '12 at 23:26

Tapefreak

982
1
13
16

score 0 · Answer 3 · answered Jan 17 '12 at 13:50

0

You can just add: padding-right: 0; to the textarea selector and it will line up your scrollbar with the side of the element. :)

answered Jan 17 '12 at 13:50

Kyle

65,599
28
144
152

If I do that, the top and bottom of the scrollbars are still not aligned. It looks rather odd. – Pablo Fernandez Jan 17 '12 at 13:54
Are you using a custom scrollbar there? – Kyle Jan 17 '12 at 13:58
Nope, the standard one. That's Firefox on MacOSX. I'll post another screenshot. – Pablo Fernandez Jan 17 '12 at 14:39

timing · Answer 4 · 2012-01-17T15:52:50.237

0

You could wrap the textarea in a div:

<div class="textarea-wrapper">
    <textarea>
</div>

css:

.textarea-wrapper{
    box-shadow: inset 2px 2px 2px 0px #ddd;
}
textarea {
    padding: 10px;
    background: transparent;
    border: none;
}

A jsFiddle here: http://jsfiddle.net/rXpPy/

edited Jan 17 '12 at 15:52

answered Jan 17 '12 at 14:00

timing

6,340
1
17
16

I thought of that, but that padding that would cause the text to not overlap the shadow, the padding on textarea, would also cause the the scrollbar to be separated from the borders. – Pablo Fernandez Jan 17 '12 at 14:46
Please see the jsFiddle I added to my answer. – timing Jan 17 '12 at 15:53
Which browser are you using? My chrome on ubuntu ignores the padding at the scrollbar, but it does to padding for the content. – timing Jan 17 '12 at 16:02
Oh nice... at least in Chrome in MacOSX looks nice. – Pablo Fernandez Jan 17 '12 at 16:34
Well, it works on Chrome in MacOSX, but not on Firefox or IE :/ – Pablo Fernandez Feb 10 '12 at 10:41

How to properly style a text area with inner shadows and scrollbar

4 Answers4

Linked