outline-color

outline-colorは、アウトラインの色を指定するスタイルです。

解説

outline-colorはアウトラインの色を明示的に指定したい場合に使用します。
アウトラインとは、輪郭線のことです。
HTMLのinput要素、textarea要素、select要素などに使用できます。

値はカラーコードやカラーネームなどで指定します。

構文

構文は以下になります。

outline-color: 値;

値

outline-colorには以下の値が指定できます。

値	説明
カラーネーム	カラーネームで指定する（例）青色を名称で指定する　⇒ outline-color:blue;
カラーコード	カラーコードで指定する（例）青色をコードで指定する　⇒ outline-color:#0000ff;
RGB値	RGB値で指定する（例）青色をRGB値で指定する　⇒ outline-color:rgb(0, 0, 255);
RGBA値	RGBA値で指定する（例）青色、透過率0.8を指定する　⇒ outline-color:rgba(0, 0, 255, 0.8); 　※透過率は0.0(透明)～1.0(不透明)で指定します。
transparent	透明を指定する（例）outline-color:transparent;

サンプル

アウトラインの色を赤色にする


.sample01 {
  outline-style:solid;
  outline-color:red;
}


<input type="text" class="sample01">

<select class="sample01">
  <option>みかん</option>
  <option>ぶどう</option>
  <option>りんご</option>
</select>

<textarea class="sample01"></textarea>

同時にoutline-styleを指定しないと、アウトラインは表示されません。

（参考）アウトラインの色を指定しないと以下のように表示されます。

備考

同時にoutline-styleを指定しないとアウトラインは表示されないのでご注意ください。
アウトラインの見え方はブラウザによって異なります。

outline-color

解説

構文

値

サンプル

アウトラインの色を赤色にする

備考

関連項目