Css Input Text Dan Textarea

Published by Concept Phone Selasa, 24 Juli 2018

Satu lagi penerapan CSS dalam elemen-elemen input. Sekarang Saya akan menunjukkan beberapa tip untuk tampilan input text dan textarea.
Ini yaitu referensi tampilan input text dan textarea biasa:

Tanpa CSS

Dan ini yaitu CSS untuk mengubah tampilannya:

input[type="text"] {   font:normal 12px Verdana,Sans-Serif;   border:1px solid #dcdcdc;   background-color:#fafafa;   -webkit-box-shadow:inset 0 0 5px #666;   -moz-box-shadow:inset 0 0 5px #666;   box-shadow:inset 0 0 5px #666;   padding:2px; }  textarea {   font:bold 12px Verdana,Sans-Serif;   border:5px solid #dcdcdc;   background-color:#fafafa;   -webkit-box-shadow:inset 0 0 5px #666;   -moz-box-shadow:inset 0 0 5px #666;   box-shadow:inset 0 0 5px #666;   padding:2px; }  input[type="text"]:focus, textarea:focus {   background-color:#FFE4B5; }

Letakkan isyarat tersebut di atas </style> atau ]]></b:skin> maka tampilannya akan berubah menyerupai ini:

Dengan CSS

Dari penampilan isyarat ini Saya rasa kalian sudah mengerti maksudnya.

input[type="text"] { ... }

textarea { ... }

Nah, untuk isyarat yang terakhir itu dipakai untuk menciptakan tampilan warna textarea dan input text menjadi berubah saat kursor sedang aktif di dalamnya.

input[type="text"]:focus, textarea:focus {   background-color:#FFE4B5; }

CSS Textarea Focus

Sumber https://www.dte.web.id/