javascript - 带有不规则边框的Textarea，onfocus边框颜色变化？

Question

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

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

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

Answer 1

您可以使用与非图像实现相同的方法来执行此操作：

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

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

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

Answer 2

纯 CSS处理事件的另一种解决方法focus（不幸的是：focus 伪类不适用于 IE<=8）

刚试过火狐。在 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 解决方案：将 a 放入textareaa并在 the 之后div使用另一个来获得边框形状。divtextarea

演示

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;
}