javascript - 不規則な境界線を持つテキストエリア、オンフォーカスの境界線の色が変わる?

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 では動作しません)

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のを使用して境界線の形状を取得します。divdivtextarea

デモ

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