Ada ide?
CSS 4 akan lebih bagus jika menambahkan beberapa kait dalam berjalan mundur . Hingga saat itu dimungkinkan (walaupun tidak disarankan) untuk menggunakan checkboxdan / atau radio inputs untuk mematahkan cara yang biasa hal-hal yang terhubung, dan melalui itu juga memungkinkan CSS untuk beroperasi di luar ruang lingkup normal ...
/* Hide things that may be latter shown */
.menu__checkbox__selection,
.menu__checkbox__style,
.menu__hidden {
display: none;
visibility: hidden;
opacity: 0;
filter: alpha(opacity=0); /* Old Microsoft opacity */
}
/* Base style for content and style menu */
.main__content {
background-color: lightgray;
color: black;
}
.menu__hidden {
background-color: black;
color: lightgray;
/* Make list look not so _listy_ */
list-style: none;
padding-left: 5px;
}
.menu__option {
box-sizing: content-box;
display: block;
position: static;
z-index: auto;
}
/* ▼ - \u2630 - Three Bars */
/*
.menu__trigger__selection::before {
content: '\2630';
display: inline-block;
}
*/
/* ▼ - Down Arrow */
.menu__trigger__selection::after {
content: "\25BC";
display: inline-block;
transform: rotate(90deg);
}
/* Customize to look more `select` like if you like */
.menu__trigger__style:hover,
.menu__trigger__style:active {
cursor: pointer;
background-color: darkgray;
color: white;
}
/**
* Things to do when checkboxes/radios are checked
*/
.menu__checkbox__selection:checked + .menu__trigger__selection::after,
.menu__checkbox__selection[checked] + .menu__trigger__selection::after {
transform: rotate(0deg);
}
/* This bit is something that you may see elsewhere */
.menu__checkbox__selection:checked ~ .menu__hidden,
.menu__checkbox__selection[checked] ~ .menu__hidden {
display: block;
visibility: visible;
opacity: 1;
filter: alpha(opacity=100); /* Microsoft!? */
}
/**
* Hacky CSS only changes based off non-inline checkboxes
* ... AKA the stuff you cannot unsee after this...
*/
.menu__checkbox__style[id="style-default"]:checked ~ .main__content {
background-color: lightgray;
color: black;
}
.menu__checkbox__style[id="style-default"]:checked ~ .main__content .menu__trigger__style[for="style-default"] {
color: darkorange;
}
.menu__checkbox__style[id="style-one"]:checked ~ .main__content {
background-color: black;
color: lightgray;
}
.menu__checkbox__style[id="style-one"]:checked ~ .main__content .menu__trigger__style[for="style-one"] {
color: darkorange;
}
.menu__checkbox__style[id="style-two"]:checked ~ .main__content {
background-color: darkgreen;
color: red;
}
.menu__checkbox__style[id="style-two"]:checked ~ .main__content .menu__trigger__style[for="style-two"] {
color: darkorange;
}
<!--
This bit works, but will one day cause troubles,
but truth is you can stick checkbox/radio inputs
just about anywhere and then call them by id with
a `for` label. Keep scrolling to see what I mean
-->
<input type="radio"
name="colorize"
class="menu__checkbox__style"
id="style-default">
<input type="radio"
name="colorize"
class="menu__checkbox__style"
id="style-one">
<input type="radio"
name="colorize"
class="menu__checkbox__style"
id="style-two">
<div class="main__content">
<p class="paragraph__split">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
</p>
<input type="checkbox"
class="menu__checkbox__selection"
id="trigger-style-menu">
<label for="trigger-style-menu"
class="menu__trigger__selection"> Theme</label>
<ul class="menu__hidden">
<li class="menu__option">
<label for="style-default"
class="menu__trigger__style">Default Style</label>
</li>
<li class="menu__option">
<label for="style-one"
class="menu__trigger__style">First Alternative Style</label>
</li>
<li class="menu__option">
<label for="style-two"
class="menu__trigger__style">Second Alternative Style</label>
</li>
</ul>
<p class="paragraph__split">
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
... cukup kasar , tetapi hanya dengan CSS dan HTML dimungkinkan untuk menyentuh dan menyentuh kembali apa pun kecuali dari bodydan :rootdari mana saja dengan menautkan iddan forproperti radio/ checkbox inputs dan label pemicu ; kemungkinan seseorang akan menunjukkan cara menyentuh kembali mereka di beberapa titik.
Satu peringatan tambahan adalah bahwa hanya satu input dari yang spesifik yang idmungkin digunakan, pertama checkbox/ radio memenangkan keadaan berganti -ganti dengan kata lain ... Tetapi beberapa label semuanya dapat mengarah ke yang sama input, meskipun itu akan membuat HTML dan CSS terlihat lebih kotor.
... Saya berharap ada semacam solusi yang ada asli untuk CSS Level 2 ...
Saya tidak yakin dengan :penyeleksi lain , tetapi saya :checkeduntuk pra-CSS 3. Jika saya ingat dengan benar, itu adalah sesuatu [checked]yang mengapa Anda dapat menemukannya dalam kode di atas, misalnya,
.menu__checkbox__selection:checked ~ .menu__hidden,
.menu__checkbox__selection[checked] ~ .menu__hidden {
/* rules: and-stuff; */
}
... tetapi untuk hal-hal seperti ::afterdan :hover, saya sama sekali tidak yakin di mana versi CSS yang pertama kali muncul.
Itu semua menyatakan, tolong jangan pernah menggunakan ini dalam produksi, bahkan tidak dalam kemarahan. Sebagai lelucon tentu saja, atau dengan kata lain hanya karena sesuatu dapat dilakukan tidak selalu berarti harus demikian .