Textarea边框不规则，焦点边框颜色变化？

Question

所以我有一个边框的文本区域看起来像这样：

知道我应该如何改变焦点上的边框颜色？

显然，如果它有常规的css边框而不是图像会很容易，但我不知道怎么做这样的呢？

Answer 1

您可以使用与非图像实现相同的方法来实现它：

.chatBox {
    background-image: url('border.png');
}

.chatBox:hover, .chatBox:focus {
    background-image: url('border-highlight.png');
}

显然你的边框比这更复杂，但你可以看到这个概念是一样的。如果您使用嵌套元素，它仍然可以工作。如果您遇到困难，请显示一些代码，我会尽力帮助您。

Answer 2

处理focus事件的另一个workaround in pure CSS（遗憾的是：焦点伪类不能用于IE＆lt; = 8）

刚试过Firefox。在webkit上需要一些调整/额外的风格，但它只是给你一个想法，但对于css的数量和棘手的元素定位我更喜欢背景解决方案

相关的CSS和HTML

<fieldset>
    <textarea></textarea>
    <label>insert text here</label>
</fieldset>



fieldset { 
   position: relative; 
   padding : 0 0 3em 0; 
   border  : 0;
}
label {
   position : absolute;
   top  : 0;
   left : 0;
}

textarea {
   position : relative;
   z-index  : 5;
   top      : 3em;
   width    : 300px;
   height   : 120px;
   border   : 1px #ccc solid;
}

label:before {
  content   : "";
  display   : block;
  width     : 15px;
  height    : 15px;
  border    : 1px #ccc solid;
  position  : absolute;
  top       : 31px;
  left      : 20px;
  background: #fff;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}

label:after {
  content   : "";
  display   : block;
  position  : absolute;
  z-index   : 10;
  left      : 17px;
  top       : 40px;
  width     : 23px;
  height    : 1px;
  background : #fff; 
}

textarea:focus, 
textarea:focus + label:before {
   border-color : red; 
}

Answer 3

纯CSS解决方案：将textarea放在div中，然后在div之后使用另一个textarea来获取边框形状。

DEMO

HTML：

<div class='container'><textarea></textarea><div class='c'></div></div>

CSS：

.container { display: inline-block; position: relative; }
textarea {
    width: 20em;
    border: solid 2px;
}
.c {
    position: absolute;
    top: -.4em; left: 2em;
    width: 1em;
    height: 1em;
    border-top: solid 2px;
    border-left: solid 2px;
    transform: rotate(45deg);
    background: white;
}
textarea:focus, textarea:hover, textarea:focus + .c, textarea:hover + .c {
    border-color: red;
    outline: none;
}