Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
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?
Posted 6-Dec-12 11:06am

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

These same codes of you
 
* {font:13px arial; color:white;}
body {background:black;}
label {display:inline-block; width:50px;}
input, textarea {margin:0px; border:1px solid red; padding:0px; background:green;}
#parent {width:284px; overflow:hidden;}
textarea {width:300px; height:100px; overflow-x:hidden; overflow-y:scroll;}
 
Works fine in my chrome. Check with the updated version of chrome
  Permalink  
v2
Comments
RainLover at 10-Dec-12 8:18am
   
I use the latest version of Google Chrome on Windows XP.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



Advertise | Privacy | Mobile
Web01 | 2.8.1411022.1 | Last Updated 10 Dec 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100