CSS Pseudo Class Untuk Element Input

Terdapat beberapa pseudo class terkait dengan element input (meliputi  tag input, textarea, checkbox, radio, dll) pada tutorial ini kita akan membahasnya lebih detai satu per satu.

1. Pseudo class :hover

Pseudo class :hover  akan aktif ketika mouse berada diatas element,  pseudo class ini dapat digunakan untuk semua element termasuk pseudo-element, khusus untuk IE 6, pseudo class ini hanya diperuntukkan untuk element <a>. Mulai diperkenalkan pada CSS 2, pseudo-class ini telah disupport hampir semua browser, selengkapnya dapat dilihat di halaman :hover di Mozilla Developer Network

2. Pseudo class :focus

Pseudo class ini aktif  ketika cursor berada pada element input baik karena kita klik element tersebut maupun ketika mengetikkan  tombol Tab pada keyboard, disamping itu pseudo class ini juga aktif ketika kita menekan element input yang berbentuk tombol (seperti: <input type=”submit”>) Pada contoh berikut, klik input pada bagian nama kemudian tekan tab untuk beralih ke alamat, atau klik tombol submit dan tahan, perhatikan  perubahannya.

Style CSS nya

.input,
.textarea
{ 
	font-size:15px;
	padding:9px;
	border:1px solid #CCCCCC;
	transition: all .3s;
} 
.input:hover,
.textarea:hover {
	border-color: rgba(21,127,219,.63);
}
.input:focus,
.textarea:focus { 
	box-shadow: 0px 0px 7px 0px rgba(21,127,219,.63);
	border-color:#4ab1ff;
	background: #F5F5F5;
}

Mulai diperkenalkan sejak CSS 2.1, pseudo-class ini telah didukung oleh hampir semua browser, sedangkan untuk IE baru mensupportnya mulai versi 8+, untuk selengkapnya silakan mengunjungi  halaman :focus pada Mozilla Developer Network

3. Pseudo Class  :enabled

Pseudo class  :enabled  akan menseleksi semua element (termasuk radio, checkbox, selectbox, input, dan textarea) pada kondisi enabled, suatu element dikatakan enabled jika element tersebut aktif  (misal: bisa dipilih (untuk selectbox), bisa di klik, bisa menerima input atau mendapat focus, dll), style ini akan menimpa default style yang telah didefinisikan sebelumnya, misalnya sebelumnya telah kita buat:

input {
	background-color: red;
	color: orange;
}

kemudian  jika kita menuliskan

input:enabled {
	background-color: blue;
	color: yellow;
}

maka style pada input:enabled yang akan digunakan.

Karena diperkenalkan mulai CSS 3, pseudo class ini tidak didukung oleh browser lama, terutama Internet Explorer yang baru mendukungnya pada versi 9+, untuk selengkapnya silakan kunjungi halaman Mozilla Developer Network bagian :enabled

4. Pseudo Class  :disabled

Pseudo class :disabled kebalikan dari :enabled, pseudo class ini akan menseleksi element yang tidak aktif, yang biasanya memiliki attribute disabled, attribute disabled sendiri biasanya ditulis disabled saja, disabled="" atau disabled="disabled“. Contoh berikut membandingkan penggunaan pseudo class  :enabled dan :disabled

Sama seperti pseudo class :enabled, pseudo class ini juga pertama kali diperkenalkan pada CSS 3, sehingga tidak didukung oleh browser lama, IE baru mendukungnya pada versi 9+, selengkapnya bisa dilihat pada halaman Mozilla Developer Network

5. Pseudo Class  :checked

Pseudo class :checked digunakan untuk element input (hanya checkbox dan radio) yang kondisinya sedang terpilih, kondisi terpilih tersebut bisa disebabkan karena di klik atau di tambahkan attribute checked.  Untuk melihat bagaimana pseudo-class ini bekerja, silakan klik checkbox dan radio button berikut ini:

Style:

label {
	cursor: pointer;
    vertical-align: middle;
    line-height: 30px;
	display: inline-block;
}
input:enabled:hover {
	border-color: rgba(21,127,219,.63);
}

input:enabled:focus {
	box-shadow: 0px 0px 7px 0px rgba(21,127,219,.63);
    border-color: #4ab1ff;
    background: #F5F5F5;
}
input[type=radio],
input[type=checkbox] {
    border: 1px solid #b4b9be;
    background: #fff;
	width: 20px;
    height: 20px;
    outline: 0;
    padding: 0!important;
	box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
    -webkit-appearance: none;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
    transition: .05s border-color ease-in-out;
    -webkit-transition: .05s border-color ease-in-out;
	float:left;
}
input[type=radio] {
	border-radius: 50%;
}
input[type=radio]:checked:before,
input[type=checkbox]:checked:before {
	content: "";
    width: 10px;
    height: 10px;
    margin: 4px;
    background-color: #1e8cbe;
    float: left;
    speak: none;
}
input[type=radio]:checked:before {
    border-radius: 50px;
	-webkit-border-radius: 50px;
}

Selevor ini merupakan bagian dari CSS 3, sehingga browser lama tidak mendukungnya, IE baru mendukungnya mulai versi 9+, untuk selengkapnya silakan mengunjungi  halaman Mozilla Developer Network bagian :checked

6. Pseudo Class  :required, :valid, dan :invalid

Pseudo class :required

Pseudo class :required memungkinkan kita untuk menerapkan style pada setiap element input yang memiliki attribute required, attribute required sendiri mulai diperkenalkan pada HTML 5. Menurut standar W3C, nilai attribute ini  dapat diisi apa saja (misal: required="true" atau required=""), asalkan ada attribute required maka sudah valid. Validasi required dapat diterapkan untuk semua element input termasuk radio dan checkbox.

Pseudo class :valid dan :invalid

Penggunaan pseudo class :valid dan :invalid berkaitan dengan validasi pada HTML 5, misal ketika mensubmit form yang didalamnya terdapat element input dengan attribute required, maka ketika tidak diisi, hasilnya error, sehingga pseudo class  :invalid manjadi aktif. Contoh lain ketika input memiliki type url atau email dan penulisan url atau email tersebut salah, maka akan muncul error (pseudo class :invalid aktif), jika benar maka pseudo-class :valid  yang akan aktif.

Contoh: Pseudo class dengan validasi HTML 5

Pada contoh berikut, semua field wajib diisi (required) dan diberi tanda bintang, terdapat beberapa validasi lainnya, yaitu email dan url, ketika mensubmit form dan terdapat inputan yang belum diisi atau diisi namun penulisan url dan email tidak benar (penulisan url harus diawali http://), maka hasilnya invalid, sehingga  muncul tanda silang di sebelah kanan input (pseudo class :invalid), jika penulisannya benar, maka akan muncul tanda centang hijau (pseudo class :valid).

Kode HTML:

<form class="form-validation" action="" method="post">
	<label>Nama</label><input name="nama" required="" type="text" /><i></i>
	<label>Email<sup>*</sup></label><input name="email" required="" type="email" /><i></i>
	<label>Url</label><input name="url" required="" type="url" /><i></i>
	<label>Gender *</label><label><input name="gender" required="" type="radio" value="pria" />Pria</label>
	<label><input name="gender" required="" type="radio" value="wanita" />Wanita</label>
	<label></label><input class="button" name="submit" type="submit" value="Submit" />
</form>

Sedangkan CSS nya:

.form-validation label {
	width:100px;
	display: inline-block;
}
.form-validation p {
	margin: 0;
}
.form-validation i {
	font-size: 20px;
	margin-left: 5px;
}
.form-validation input:focus:invalid + i::after {
	content: "f057";
	color: #FF4343;
}
.form-validation input:valid + i::after {
	content: "f058";
	color: #18CA3F;
}

.form-validation i
{
	font-family: 'icomoon' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.form-validation input
{ 
	display: inline-block;
    font-size: 15px;
    padding: 7px 9px;
    border: 1px solid #CCCCCC;
    transition: all .3s;
    margin: 0;
} 
.form-validation input:hover {
	border-color: rgba(21,127,219,.63);
} 
.form-validation input:focus {
	box-shadow: 0px 0px 7px 0px rgba(21,127,219,.63);
	border-color: rgba(21,127,219,.63);
	background-color: #FEFFFA;
}

pada contoh diatas saya menggunakan icon dari icomoon sehingga untuk dapat menggunakannya font harus di load terlebih dahulu menggunakan  @font-face.

Ketiga pseudo class ini juga merupakan bagian dari CSS 3, sehingga browser lama tidak mendukungnya, IE baru mendukungnya mulai versi 9+, untukk selengkapnya silakan mengunjungi  halaman :valid, :invalid, dan :required pada Mozilla Developer Network.

7. Pseudo Class  :read-only dan :read-write

Berdasarkan spesifikasi dari W3C, pseudo class :read-write digunakan untuk menseleksi element:

• Element input  yang dapat diberikan attrubute readonly, namun tidak memiliki attribute readonly dan tidak disabled.
• Element textarea yang tidak memiliki attribute readonly dan tidak disabled
• Element lain (selain input dan textarea) yang dapat diedit (memiliki attribute contenteditable)

Tidak semua browser sudah mensuport pseudo class ini, beberapa browser seperti Chrome dan Microsoft Edge (tidak termasuk IE Versi <= 11) telah mensupportnya, sedangkan Firefox hingga versi 43 dan Android belum mensupport.

Contoh HTML:

<!-- element input yang tidak memiliki attribute readonly dan tidak disabled -->
<input type="text" name="email" value="email@gmail.com"/>

<!-- element textarea yang tidak memiliki attribute readonly dan tidak disabled -->
<textarea name="alamat"/>Contoh read-write pada textarea</textarea>

<!-- element lain (div) yang memiliki attribut contenteditable -->
<div contenteditable>Element DIV yang isinya dapat diedit</div>

CSS

:read-write {
	cursor: text;
	padding: 10px;
}

:read-only

Kebalikan dari pseudo class  :read-write  adalah:read-only,  berdasarkan spesifikasi dari W3C  seharusnya pseudo class ini cocok dengan semua element yang isinya tidak dapat diedit, dengan spesifikasi tersebut, seharusnya element dengan attribut contenteditable tidak termasuk didalamnya, namun faktanya element tersebut termasuk, sehingga element dengan attribut contenteditable akan cocok dengan pseudo class :read-write dan :read-only, aneh kan?

Manfaat pseudo class ini adalah untuk menghindar penulisan class pada element, namun karena belum disupport oleh semua browser, mungkin lebih aman jika menambahkan class pada element, misal: class="readonly"

Berikut ini adalah contoh textarea dengan attribute readonly yang dengan sedikit rule css akan merubah bentuk cursor menjadi default dan text tidak dapat diseleksi.

textarea:read-only {
	border: 1px solid #9C9C9C;
    color: #949393;
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}