Code Thuộc tính outline-color trong CSS

Trình soạn thảo - Code Thuộc tính outline-color trong CSS

Kết quả - Code Thuộc tính outline-color trong CSS

Tự code rồi chạy thử... Chạy Thử 
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính outline-color trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
input{width:100%; height:35px; border:3px solid red; float:left; margin-bottom:20px; outline-style: dotted; outline-width:5px}
textarea{width:100%; height:50px; border:3px solid red; float:left; margin-bottom:20px; outline-style: dotted; outline-width:5px}
</style>
</head>
<body>

<h1>Code Thuộc tính outline-color trong CSS</h1>

<p>Dùng để quy định màu sắc cho đường viền nằm ngoài border của phần tử HTML input, textarea, nó sử dụng nhiều cách quy định màu, màu mặc định hay màu trong suốt:</p>

<!--outline-color:green;-->
<input style="outline-color:green;" type="text" placeholder="outline-color:green;">
<textarea style="outline-color:green;" placeholder="outline-color:green;">&lt;/textarea>

<!--outline-color:#0000FF;-->
<input style="outline-color:#0000FF;" type="text" placeholder="outline-color:#0000FF;">
<textarea style="outline-color:#0000FF;" placeholder="outline-color:#0000FF;">&lt;/textarea>

<!--outline-color:rgb(201, 76, 76);-->
<input style="outline-color:rgb(201, 76, 76);" type="text" placeholder="outline-color:rgb(201, 76, 76);">
<textarea style="outline-color:rgb(201, 76, 76);" placeholder="outline-color:rgb(201, 76, 76);">&lt;/textarea>

<!--outline-color:rgba(201, 76, 76, 0.3);-->
<input style="outline-color:rgba(201, 76, 76, 0.3);" type="text" placeholder="outline-color:rgba(201, 76, 76, 0.3);">
<textarea style="outline-color:rgba(201, 76, 76, 0.3);" placeholder="outline-color:rgba(201, 76, 76, 0.3);">&lt;/textarea>

<!--outline-color:hsl(89, 43%, 51%);-->
<input style="outline-color:hsl(89, 43%, 51%);" type="text" placeholder="outline-color:hsl(89, 43%, 51%);">
<textarea style="outline-color:hsl(89, 43%, 51%);" placeholder="outline-color:hsl(89, 43%, 51%);">&lt;/textarea>

<!--outline-color:hsla(89, 43%, 51%, 0.3);-->
<input style="outline-color:hsla(89, 43%, 51%, 0.3);" type="text" placeholder="outline-color:hsla(89, 43%, 51%, 0.3);">
<textarea style="outline-color:hsla(89, 43%, 51%, 0.3);" placeholder="outline-color:hsla(89, 43%, 51%, 0.3);">&lt;/textarea>

<!--outline-color:transparent;-->
<input style="outline-color:transparent;" type="text" placeholder="outline-color:transparent;">
<textarea style="outline-color:transparent;" placeholder="outline-color:transparent;">&lt;/textarea>

</body>
</html>