Cara menggunakan css not focus input

Selektor CSS menggunakan selektor pseudo class merupakan selektor pada CSS untuk menambahkan efek khusus ataupun gaya tertentu pada suatu elemen HTML. Pseudo Class ditandai dengan tanda semi colon ":" dalam memberikan perujukkan suatu elemen HTML. Pseudo Class dapat diterapkan pada beberapa kasus misalnya saat pointer mouse berada di atas suatu elemen HTML (:hover), saat kursor pointer berada di dalam suatu elemen input formulir (:focus) ataupun untuk menunjukkan elemen anakkan pertama yang berada pada elemen induk (:first-child) dan lainnya.

Pseudo Class sering digunakan untuk mendapatkan efek khusus tanpa harus menggunakan script javascript dalam membuat efek tampilan. Pseudo Class :hover adalah pseudo class yang cukup sering digunakan pada elemen tag , yang akan membuat elemen tersebut efek tersorot otomatis saat mouse melintas di atas elemen tersebut.

1

Selector:pseudo-class {property : value}

Berikut selektor Pseudo Class yang sering digunakan dalam menata halaman HTML :

No.SelektorDeskripsi1.:linkMenyeleksi semua tautan yang belum dikunjungi2.:visitedMenyeleksi semua tautan yang sudah dikunjungi3.:hoverMenyeleksi tautan pada saat mouse di atas elemen4.:activeMenyeleksi semua tautan yang aktif5.:focusMenyeleksi konten teks (input) saat posisi terfokus6.:first-childMenyeleksi elemen anakan pertama di dalam elemen indukkan7.:last-childMenyeleksi elemen anakan terakhir di dalam elemen indukkan8.:nth-child(n)Menyeleksi elemen anakan ke-n di dalam elemen indukkan9:disabledMenyeleksi input yang dalam posisi disabled10.:checkedMenyeleksi input yang dalam posisi dicentang11.:enabledMenyeleksi input yang dalam posisi enabled

Pseudo Class :link

Pseudo Class :link digunakan untuk melakukan seleksi terhadap elemen tag hyperlink anchor saat elemen tersebut belum dikunjungi (diklik).

1
2
3
4
5
6
7
8
9
10
11
12
13
14

Belajar Style Sheet Pada CSS

Tautan

Hasil Script :

Belajar Style Sheet Pada CSS

Tautan

Pseudo Class :hover

Pseudo Class :hover digunakan untuk melakukan seleksi terhadap elemen tag hyperlink anchor saat mouse melintas di atas elemen tersebut (mouse over).

1
2
3
4
5
6
7
8
9
10
11
12
13
14

Belajar Style Sheet Pada CSS

Silahkan arahkan mouse di tautan ini

Hasil Script :

Pseudo Class :focus

Pseudo Class :focus digunakan untuk melakukan seleksi terhadap elemen HTML, saat elemen tersebut dalam posisi mendapatkan focus.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

Belajar Style Sheet Pada CSS


   
   Silahkan isi nama anda :
   
   

Hasil Script :

Pseudo Class :first-child

Pseudo Class :first-child digunakan untuk melakukan seleksi terhadap elemen HTML yang memiliki elemen anakkan. Elemen anakkan yang pertama yang akan diseleksi. Elemen induk dapat berupa div, paragraf, list item (li) hingga table head (th) maupun table data (td) pada tag .

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

Belajar Style Sheet Pada CSS


   

Pseudo Class :last-child

Pseudo Class :last-child digunakan untuk melakukan seleksi terhadap elemen HTML yang memiliki elemen anakkan. Elemen anakkan yang terakhir yang akan diseleksi.

Example

Select and style an input field when it gets focus:

input:focus {
  background-color: yellow;
}

More "Try it Yourself" examples below.

Definition and Usage

The :focus selector is used to select the element that has focus.

Tip: The :focus selector is allowed on elements that accept keyboard events or other user inputs.

Browser Support

The numbers in the table specifies the first browser version that fully supports the selector.

Selector:focus4.08.02.03.19.6

CSS Syntax

:focus {
  css declarations;
} Demo

More Examples

Example

When an gets focus, gradually change the width from 100px to 250px:

input[type=text] {
  width: 100px;
  transition: ease-in-out, width .35s ease-in-out;
}

input[type=text]:focus {
  width: 250px;
}

Related Pages

CSS tutorial: CSS Pseudo classes