滚动没有滚动条(Scroll without a scrollbar)

样品形式：

<!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>

我想删除/隐藏textarea的滚动条，因为它不符合我的表单样式。我知道我可以使用jQuery插件样式的滚动条，但他们没有在不同浏览器/系统可靠地工作。要隐藏滚动条，我可以使用textarea {width:300px; height:100px; overflow:hidden;} textarea {width:300px; height:100px; overflow:hidden;} textarea {width:300px; height:100px; overflow:hidden;}但它完全停止火狐通过鼠标和键盘滚动。我也尝试以下解决方法：

#parent {width:284px; height:102px; overflow:hidden;}
textarea {width:300px; height:100px; overflow-x:hidden; overflow-y:scroll;}

它应该准确地工作，如果我加入一些脚本来计算父师宽度：

var textareaWidth = document.getElementById('entry_3').scrollWidth;
document.getElementById('parent').style.width = textareaWidth + 'px';

但无论如何上面的方法似乎并不在Chrome / Safari浏览器工作。
演示： http://jsfiddle.net/RainLover/snTaP/

打开Chrome / Safari浏览器上面的演示>>插入一些文本textarea的亮点>> /选择线和鼠标拖动到右边，你会看到滚动条。或使用键盘按键Page Up和Page Down 。

任何更正或其他解决办法？

哈克但似乎工作...

使用::after pseudoelement

#parent {width:302px; overflow:hidden; position: relative;}
textarea {width:300px; height:100px; overflow-x:hidden; overflow-y:scroll;}
textarea:focus {
    outline-offset: 0;
    outline-style: none;
}

#parent::after {
    position: absolute;
    width: 17px;
    top: 0;
    right: 0px;
    height: 102px;
    border-left:1px solid red;
    background-color: black;
    content: "";
    display: block;   
}

http://jsfiddle.net/tarabyte/snTaP/3/

或者使用额外的div

HTML：

<div id="parent">
  <textarea id="entry_3"></textarea>
  <div id="hidescroll"></div>
</div>

CSS：

#parent {width:302px; overflow:hidden; position: relative;}
textarea {width:300px; height:100px; overflow-x:hidden; overflow-y:scroll;}
textarea:focus {
    outline-offset: 0;
    outline-style: none;
}
#hidescroll {
    position: absolute;
    width: 17px;
    top: 0;
    right: 0;
    z-index: 1000;
    height: 102px;
    border-left:1px solid red;
    background-color: black;
}

http://jsfiddle.net/tarabyte/snTaP/2/