Jawab pada 2019:
Cara terbaik (sebenarnya satu-satunya cara *) untuk mensimulasikan acara klik yang sebenarnya hanya menggunakan CSS (bukan hanya melayang pada elemen atau membuat elemen aktif, di mana Anda tidak memiliki mouseUp ) adalah dengan menggunakan kotak centang hack. Ia bekerja dengan melampirkan labelke <input type="checkbox">elemen melalui label for=""atribut.
Fitur ini memiliki dukungan browser yang luas (kelas :checkedsemu adalah IE9 +).
Terapkan nilai yang sama ke <input> 's atribut ID dan menyertai <label>' s for=""atribut, dan Anda dapat memberitahu browser untuk re-gaya label di klik dengan :checkedpseudo-class, berkat fakta bahwa mengklik label akan memeriksa dan hapus centang pada "terkait" <input type="checkbox">.
* Anda dapat mensimulasikan peristiwa "terpilih" melalui kelas :activeatau :focussemu di IE7 + (mis. Untuk tombol yang biasanya 50pxlebar, Anda dapat mengubah lebarnya saatactive : #btnControl:active { width: 75px; }), tetapi mereka tidak benar "klik" peristiwa. Mereka "hidup" sepanjang waktu elemen dipilih (seperti Tabdengan menggunakan keyboard Anda), yang sedikit berbeda dari peristiwa klik yang sebenarnya, yang mengaktifkan aksi - biasanya - mouseUp.
Demo dasar hack kotak centang (struktur kode dasar untuk apa yang Anda minta):
label {
display: block;
background: lightgrey;
width: 100px;
height: 100px;
}
#demo:checked + label {
background: blue;
color: white;
}
<input type="checkbox" id="demo"/>
<label for="demo">I'm a square. Click me.</label>
Di sini saya telah menempatkan label tepat setelah input di markup saya. Ini agar saya dapat menggunakan pemilih saudara yang berdekatan (+ tombol) untuk memilih hanya label yang langsung mengikuti #demokotak centang saya . Karena :checkedpseudo-class berlaku untuk kotak centang, #demo:checked + labelhanya akan berlaku ketika kotak centang dicentang.
Demo untuk mengubah ukuran gambar pada klik, yang Anda tanyakan:
#btnControl {
display: none;
}
#btnControl:checked + label > img {
width: 70px;
height: 74px;
}
<input type="checkbox" id="btnControl"/>
<label class="btn" for="btnControl"><img src="http://placekitten.com/200/140" id="btnLeft" /></label>
Dengan itu dikatakan, ada adalah kabar buruk. Karena label hanya dapat dikaitkan dengan satu kontrol formulir pada satu waktu , itu berarti Anda tidak bisa begitu saja meletakkan tombol di dalamnya<label></label> tag dan menyebutnya sehari. Namun, kita dapat menggunakan beberapa CSS untuk membuat label terlihat dan berperilaku cukup dekat dengan bagaimana sebuah tombol HTML terlihat dan berperilaku.
Demo untuk meniru efek klik tombol, di atas dan di luar apa yang Anda minta:
#btnControl {
display: none;
}
.btn {
width: 60px;
height: 20px;
background: silver;
border-radius: 5px;
padding: 1px 3px;
box-shadow: 1px 1px 1px #000;
display: block;
text-align: center;
background-image: linear-gradient(to bottom, #f4f5f5, #dfdddd);
font-family: arial;
font-size: 12px;
line-height:20px;
}
.btn:hover {
background-image: linear-gradient(to bottom, #c3e3fa, #a5defb);
}
.btn:active {
margin-left: 1px 1px 0;
box-shadow: -1px -1px 1px #000;
outline: 1px solid black;
-moz-outline-radius: 5px;
background-image: linear-gradient(to top, #f4f5f5, #dfdddd);
}
#btnControl:checked + label {
width: 70px;
height: 74px;
line-height: 74px;
}
<input type="checkbox" id="btnControl"/>
<label class="btn" for="btnControl">Click me!</label>
Sebagian besar CSS dalam demo ini hanya untuk menata elemen label. Jika Anda tidak benar-benar membutuhkan tombol , dan elemen lama apa pun sudah cukup, maka Anda dapat menghapus hampir semua gaya dalam demo ini, mirip dengan demo kedua saya di atas.
Anda juga akan melihat saya memiliki satu properti awalan di sana -moz-outline-radius,. Beberapa waktu yang lalu, Mozilla menambahkan properti non-spek yang mengagumkan ini ke Firefox, tetapi orang-orang di WebKit memutuskan mereka tidak akan menambahkannya , sayangnya. Jadi pertimbangkan bahwa baris CSS hanyalah peningkatan progresif untuk orang yang menggunakan Firefox.
:activeberfungsi saat mouse turun. Bergantung pada apa yang Anda coba lakukan, Anda mungkin dapat membuatnya bekerja menggunakan pseudo-class CSS4:target.