CSS の outline-color は、HTMLのリンクやフォーム部品がフォーカスを得た状態になったときに表示される枠線の色を指定するプロパティです。
ブラウザでTABキーを押すと、フォーカスがリンクやフォーム部品を移動していきます。フォーカスがある状態のリンクやフォーム部品は、枠線で囲まれます。この枠線の幅やスタイル、色を指定します。
outline-color : autooutline-color : nameoutline-color : #rrggbboutline-color : rgb(red, green, blue)outline-color : rgba(red, green, blue, alpha)outline-color : transparent| 名前 | カラーコード | サンプル |
|---|---|---|
| black | #000000 |
|
| gray, grey | #808080 |
|
| silver | #c0c0c0 |
|
| white | #ffffff |
|
| maroon | #800000 |
|
| red | #ff0000 |
|
| purple | #800080 |
|
| fuchsia, magenta | #ff00ff |
|
| green | #008000 |
|
| lime | #00ff00 |
|
| olive | #808000 |
|
| yellow | #ffff00 |
|
| navy | #000080 |
|
| blue | #0000ff |
|
| teal | #008080 |
|
| aqua, cyan | #00ffff |
|
| orange | #ffa500 |
|
| aliceblue | #f0f8ff |
|
| antiquewhite | #faebd7 |
|
| aquamarine | #7fffd4 |
|
| azure | #f0ffff |
|
| beige | #f5f5dc |
|
| bisque | #ffe4c4 |
|
| blanchedalmond | #ffebcd |
|
| blueviolet | #8a2be2 |
|
| brown | #a52a2a |
|
| burlywood | #deb887 |
|
| cadetblue | #5f9ea0 |
|
| chartreuse | #7fff00 |
|
| chocolate | #d2691e |
|
| coral | #ff7f50 |
|
| cornflowerblue | #6495ed |
|
| cornsilk | #fff8dc |
|
| crimson | #dc143c |
|
| darkblue | #00008b |
|
| darkcyan | #008b8b |
|
| darkgoldenrod | #b8860b |
|
| darkgray, darkgrey | #a9a9a9 |
|
| darkgreen | #006400 |
|
| darkkhaki | #bdb76b |
|
| darkmagenta | #8b008b |
|
| darkolivegreen | #556b2f |
|
| darkorange | #ff8c00 |
|
| darkorchid | #9932cc |
|
| darkred | #8b0000 |
|
| darksalmon | #e9967a |
|
| darkseagreen | #8fbc8f |
|
| darkslateblue | #483d8b |
|
| darkslategray, darkslategrey | #2f4f4f |
|
| darkturquoise | #00ced1 |
|
| darkviolet | #9400d3 |
|
| deeppink | #ff1493 |
|
| deepskyblue | #00bfff |
|
| dimgray / dimgrey | #696969 |
|
| dodgerblue | #1e90ff |
|
| firebrickfirebrick | #b22222 |
|
| floralwhite | #fffaf0 |
|
| forestgreen | #228b22 |
|
| gainsboro | #dcdcdc |
|
| ghostwhite | #f8f8ff |
|
| gold | #ffd700 |
|
| goldenrod | #daa520 |
|
| greenyellow | #adff2f |
|
| honeydew | #f0fff0 |
|
| hotpink | #ff69b4 |
|
| indianred | #cd5c5c |
|
| indigo | #4b0082 |
|
| ivory | #fffff0 |
|
| khaki | #f0e68c |
|
| lavender | #e6e6fa |
|
| lavenderblush | #fff0f5 |
|
| lawngreen | #7cfc00 |
|
| lemonchiffon | #fffacd |
|
| lightblue | #add8e6 |
|
| lightcoral | #f08080 |
|
| lightcyan | #e0ffff |
|
| lightgoldenrodyellow | #fafad2 |
|
| lightgray, lightgrey | #d3d3d3 |
|
| lightgreen | #90ee90 |
|
| lightpink | #ffb6c1 |
|
| lightsalmon | #ffa07a |
|
| lightseagreen | #20b2aa |
|
| lightskyblue | #87cefa |
|
| lightslategray, lightslategrey | #778899 |
|
| lightsteelblue |
#b0c4de
|
|
| lightyellow |
#ffffe0
|
|
| limegreen |
#32cd32
|
|
| linen |
#faf0e6
|
|
| mediumaquamarine |
#66cdaa
|
|
| mediumblue |
#0000cd
|
|
| mediumorchid |
#ba55d3
|
|
| mediumpurple |
#9370db
|
|
| mediumseagreen |
#3cb371
|
|
| mediumslateblue |
#7b68ee
|
|
| mediumspringgreen |
#00fa9a
|
|
| mediumturquoise |
#48d1cc
|
|
| mediumvioletred |
#c71585
|
|
| midnightblue |
#191970
|
|
| mintcream |
#f5fffa
|
|
| mistyrose |
#ffe4e1
|
|
| moccasin |
#ffe4b5
|
|
| navajowhite |
#ffdead
|
|
| oldlace |
#fdf5e6
|
|
| olivedrab |
#6b8e23
|
|
| orangered |
#ff4500
|
|
| orchid |
#da70d6
|
|
| palegoldenrod |
#eee8aa
|
|
| palegreen |
#98fb98
|
|
| paleturquoise |
#afeeee
|
|
| palevioletred |
#db7093
|
|
| papayawhip |
#ffefd5
|
|
| peachpuff |
#ffdab9
|
|
| peru |
#cd853f
|
|
| pink |
#ffc0cb
|
|
| plum |
#dda0dd
|
|
| powderblue |
#b0e0e6
|
|
| rosybrown |
#bc8f8f
|
|
| royalblue |
#4169e1
|
|
| saddlebrown |
#8b4513
|
|
| salmon |
#fa8072
|
|
| sandybrown |
#f4a460
|
|
| seagreen |
#2e8b57
|
|
| seashell |
#fff5ee
|
|
| sienna |
#a0522d
|
|
| skyblue |
#87ceeb
|
|
| slateblue |
#6a5acd
|
|
| slategray, slategrey | #708090 |
|
| snow |
#fffafa
|
|
| springgreen |
#00ff7f
|
|
| steelblue |
#4682b4
|
|
| tan |
#d2b48c
|
|
| thistle |
#d8bfd8
|
|
| tomato |
#ff6347
|
|
| turquoise |
#40e0d0
|
|
| violet |
#ee82ee
|
|
| wheat |
#f5deb3
|
|
| whitesmoke |
#f5f5f5
|
|
| yellowgreen | #9acd32 |
|
| rebeccapurple | #663399 |
アウトライン枠線の色を名前で指定する例を以下に示す。
<input type="text" style="outline-color: red">
<input type="text" style="outline-color: green">
<input type="text" style="outline-color: blue">
アウトライン枠線の色を00からffまでの16進数で指定する例を以下に示す。
<input type="text" style="outline-color: #ff0000">
<input type="text" style="outline-color: #00ff00">
<input type="text" style="outline-color: #0000ff">
アウトライン枠線の色を0から255までの整数で指定する例を以下に示す。
<input type="text" style="outline-color: rgb(255, 0, 0)">
<input type="text" style="outline-color: rgb(0, 255, 0)">
<input type="text" style="outline-color: rgb(0, 0, 255)">
rgba(red, green, blue, alpha)<input type="text" style="outline-color: rgba(0, 0, 0, 0)">
<input type="text" style="outline-color: rgba(0, 0, 0, .5)">
<input type="text" style="outline-color: rgba(0, 0, 0, 1)">
rgba(0, 0, 0, 0) と同じauto
すべての要素に対して outline-color プロパティを適用できる。