اگر چک باکس چک شد استایل فلان چیز فلان بشه
سلام
میخواستم بدونم اگه با html css خالی بخوام حالت دارک مود بسازم چجوری میتونم بگم که اگه چک باکس چک شده بود استایل یه چیز دیگه رو عوض کن
میدونم با js میتونم انجامش بدم ولی اگه بخوام با css خالی انجام بدم چجوری باید اینکار رو بکنم؟
اینو امتحان کردم ولی نشد:
#checkbox:checked body {
background: blue;
}
پاسخ‌ها
3
سلام
تا جایی که بنده میدونم هیچ راهی وجود نداره که از طریق فرزند به پدر رسید(css) و به پدر یه استایل خاصی رو اعمال کرد, تنها به فرزندان و برادر های اون عنصر قابل اعمال هست
این هم چیزی که خواستید
<body>
<input type="checkbox" id="myCheck" />
<label for="myCheck">Toggle Click</label>
<div>
<h1>Dark Mode :)</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis quas
numquam ducimus molestias eum placeat eligendi explicabo nostrum
temporibus molestiae vel aliquid perspiciatis, officia sed odit quam
quos optio deserunt?
</p>
</div>
</body>input[type="checkbox"] {
display: none;
}
input[type="checkbox"]:checked ~ div {
background-color: black;
color: white;
}
سلام.
با سی اس اس فقط میشه موارد پدر فرزندی رو تغییر داد (اونم فقط از سمت پدر به فرزند یا از المنت قبلی به بعدی)
گفتگوهای مرتبط
شاید پاسخ شما همین‌جا باشد
سلام، همینطور که گفتن با این روش فقط میشه به المنتای بعدی یا فرزند استایل داد. چک باکس که فرزند نداره، پس باید به المنت بعدیش استایل بدیم (:
قبلا کتابخونه darkmodejs رو دیده بودم که از mix blend mode استفاده میکنه. روش کارش رو هم اینجا گفته.
اینارو بخونید روش کار دستتون میاد، من این کد ساده رو نوشتم.
میتونید از انتخابگر target هم استفاده کنید که با checkbox نیست و باید از تگ a استفاده بشه.
مرتبط: کاربردهای انتخابگر target