Rain Lover Posted December 6, 2012 Share Posted December 6, 2012 (edited) Sample form: <!DOCTYPE html><html><head><title></title><style type="text/css">* {font:13px arial; color:white;}body {background:black;}label {display:inline-block; width:50px;}input, textarea {margin:0; border:1px solid red; padding:0; background:green;}textarea {width:300px; height:100px;}</style></head><body><form action="#"><div><label for="entry_0">Name</label><input type="text" id="entry_0"></div><div><label for="entry_1">Email</label><input type="text" id="entry_1"></div><div><label for="entry_2">URL</label><input type="text" id="entry_2"></div><div id="parent"><textarea id="entry_3"></textarea></div><div><input type="submit" value="Submit"></div></form></body></html> I'd like to remove/hide the textarea scrollbar as it doesn't match my form style. I know I can use jQuery plugins to style the scrollbar, but they don't work reliably across different browsers/systems.To hide the scrollbar I can use textarea {width:300px; height:100px; overflow:hidden;}, but it completely stops Firefox scrolling through mouse and keyboard.I also tried the following workaround: #parent {width:284px; height:102px; overflow:hidden;}textarea {width:300px; height:100px; overflow-x:hidden; overflow-y:scroll;} It should work accurately if I add some script to calculate the parent division width: var textareaWidth = document.getElementById('entry_3').scrollWidth;document.getElementById('parent').style.width = textareaWidth + 'px'; But anyhow the above approach doesn't seem to work in Chrome/Safari:Demo: http://jsfiddle.net/RainLover/snTaP/ Open the above demo in Chrome/Safari >> insert some text into the textarea >> highlight/select a line and drag your mouse to the right and you'll see the scrollbar. Or use the keyboard keys Page Up and Page Down. Any corrections or other solutions? Edited December 6, 2012 by Rain Lover 1 Link to comment Share on other sites More sharing options...
ShadowMage Posted December 10, 2012 Share Posted December 10, 2012 Just thinking out loud here, but what if you wrap the textarea in a div and make that div just small enough so that the scrollbar won't fit. If you set overflow hidden on that div, the scrollbar of the textarea should be hidden from view. I see you already have the textarea wrapped in a div with an id of parent, so all you need to do is add the CSS: #parent { overflow: hidden; width: 400px; /*adjust until the textarea scrollbar is hidden*/} I'm pretty sure that the scrollbar width varies by browser so you might have to add a little bit of right padding to the textarea to completely hide the scrollbar. Link to comment Share on other sites More sharing options...
ShadowMage Posted December 10, 2012 Share Posted December 10, 2012 Otherwise, I think the only other option is to use JavaScript to scroll. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now