样品形式:
<!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;}
,但它会完全阻止 Firefox 通过鼠标和键盘滚动。我还尝试了以下解决方法:
#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 中打开上面的演示 >> 在文本区域中插入一些文本 >> 突出显示/选择一行并将鼠标向右拖动,您将看到滚动条。或使用键盘键Page Up
和Page Down
。
任何更正或其他解决方案?