html - 仅在底部删除 textarea 的框阴影

Question

这是我目前拥有的：

我想要做的是删除 textarea 的底部框阴影（位于 B、I 和 U 上方的那个），使其最终看起来像这样：

这是 JSFiddle：http: //jsfiddle.net/MgcDU/7616/

HTML：

<div class="editor span4">
  <textarea class="span4"></textarea>
  <ul class="format-post">
    <li><b>B</b></li>
    <li><i>I</i></li>
    <li><u>U</u></li>
  </ul>
</div>

CSS：

@import url('http://getbootstrap.com/2.3.2/assets/css/bootstrap.css');

body {
  margin: 10px;
}

textarea {
  border-radius: 2px 2px 0 0;
  border-bottom-color: #eee;
}

textarea:focus {
  border-bottom-color: #eeeeee;
}

textarea:focus + .format-post {
  border-color: rgba(82, 168, 236, 0.8);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 7px rgba(82, 168, 236, 0.6);
  transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
}

.format-post {
  list-style: none;
  background: #fafafa;
  height: 35px;
  border: 1px solid #cccccc;
  border-top: 0;
  border-radius: 0 0 2px 2px;
  margin: 0;
  margin-top: -10px;
}

.format-post li {
  width: 35px;
  height: 35px;
  border-right: 1px solid #eee;
  text-align: center;
  line-height: 33px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  display: inline-block;
}

请帮忙。

Answer 1

我只是改变box-shadow了

box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 
0 -4px 7px rgba(82, 168, 236, 0.6);

它奏效了！:)

底部颜色仍然是蓝色，所以我只是将其更改为

border-bottom: 1px solid #999;

如果需要，您可以更改它！:)

这是小提琴：http: //jsfiddle.net/afzaal_ahmad_zeeshan/MgcDU/7617/

请原谅我，我刚刚看到您希望对 textarea 进行着色，这不适合这个问题。您在标题中说要删除边框底部。但作为回答，你对两者都有底部边框。

如果您想在 textarea 未激活时获取边框和所有动画，则删除:focus它会完成这项工作。

我仍然非常抱歉，因为我无法得到答案不清楚，应该回答问题或答案。