我正在使用以下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;
}
此外,还有一些其他的样式,看起来像这样(在Firefox中,其他浏览器类似):
但是,在滚动条周围帮助分离内容与内部阴影的填充会破坏文本框:
如果我去掉填充,文本将重叠在阴影上,就像这样:
我可以只在左侧添加填充,解决左侧阴影的重叠问题,但无法解决上方阴影的问题,同时滚动条看起来不错:
我也可以在除右侧以外的所有地方添加填充,使文本正确显示,但工具栏仍然看起来相当奇怪:
有没有办法解决这个问题?