سلکت کردن المنت در css
سلام دوستان خسته نباشید من روی پروژه دکمه شخصی سازی شده و تم دارک مود تمرین میکردم ولی هرچقدر تلاش میکنم نمیتونم المنت پدر رو سلکت کنم کدم رو قرار میدم از دوستان اگر میتونید کمک کنید
این کد های HTMl
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<label class="switch">
<input id="darkmode" type="checkbox">
<span class="slider round"></span>
</label>
<div class="card">
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam aliquam natus excepturi provident, in, officia magnam labore delectus reprehenderit autem quas saepe animi molestiae libero ipsam architecto itaque explicabo consequuntur neque reiciendis quaerat. Provident veritatis amet asperiores reiciendis perferendis aliquid minus debitis consequatur porro neque odit dolorum molestiae illo tempora earum delectus nam suscipit quis labore doloremque cum repudiandae sit voluptatem, fugit in. Ea voluptatibus similique est ratione iusto odio voluptates molestias nobis at amet quis nihil dolor vero, consequuntur, minima consectetur dolores accusamus numquam sint saepe, commodi ab. Consequatur odit, repellat animi magnam modi possimus officiis, deserunt veniam corporis.</p>
</div>
</body>
</html>و این کد های CSS
body{
font-family: 'sansserif';
font-size: 18px;
display: flex;
justify-content:center;
align-items: center;
flex-direction:column;
height:90vh;
width:100%;
}
h2{
font-size: 22px;
text-align:center;
}
.btn{
display: inline !important;
}
.card{
padding: 5px 20px 10px 20px;
border-radius: 8px;
height:500px;
width:350px;
background: #dedede;
text-align:justify;
margin-top:45px;
transition: all ease-in-out 400ms;
}
#darkmode:checked body{
background: #ccc !important;
}
.switch:checked ~ .card{
background: #1f1b24 !important;
color: #ded;
}
#darkmode:checked ~.card h2{
color: #cf6679 !important;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;پاسخ‌ها
17
سلام
کد جاوا اسکریپت موجود نیست توی js bin
@AliValinejad
سلام دوست عزیز!
#darkmode:checked body{
background: #ccc !important;
}کد بالا اشتباه هست به دلیل اینکه میاد میگرده دنبال body در آیدی darkmode و پیدا نمیکنه.
بهتره برای این کار از jquery استفاده کنید.
$("#darkmode").change( function(){
if( $(this).is(':checked') ) {
$("body").css({"background-color": "yellow", "font-size": "200%"});
}else{
$("body").css({"background-color": "red", "font-size": "100%"});
}
});گفتگوهای مرتبط
شاید پاسخ شما همین‌جا باشد
من میخاستم بدون js کارمو راه بندازم الان یه مثال دیگه میزارم براتون که با چک باکس ساده و بدون js کار میکنه!
https://jsbin.com/fagilax/edit?html,css,output
این رو مشاهده کنید! بدون Js کار میکنه الان من میخام چک باکس رو شخصی سازی کنم!
می تونید المان 100 درصد درست کنید با تنظیم کردن z-index مشکل محو شدن input بر طرف میشه
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div>
<input id="darkmode" type="checkbox">
<div class="all"></div>
</body>
</html>body{
font-family: 'sansserif';
font-size: 18px;
display: flex;
justify-content:center;
align-items: center;
flex-direction:column;
height:90vh;
width:100%;
}
h2{
font-size: 22px;
text-align:center;
}
.btn{
display: inline !important;
}
.card{
padding: 5px 20px 10px 20px;
border-radius: 8px;
height:500px;
width:350px;
background: #dedede;
text-align:justify;
margin-top:45px;
transition: all ease-in-out 400ms;
}
#darkmode:checked body{
background: #ccc !important;
}
#darkmode:checked ~ .all{
color: #ded;
background: #000;
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
#darkmode:checked ~.card h2{
color: #cf6679 !important;
}</body></html>
سلام @AliValinejad
اگر جوابش رو پیدا کردی بگو 😀 منم نیازم شد
سلام
این موردی که بیان شد کار می کنه خودم تستa کردم.
@msdabbagh
@mohaligateway
من همچین کدی دارم
.cd-accordion-menu input[type=checkbox]:checked+label:first-of-type{
background: rgb(0 0 0 / 13%);
}و
li
input
lable
li
input
libleو مشکل اینجاست که هر دو lable سلکت مشن و نمیتونم بگم input چک شده li پدرش بکگراند بگیره
سلام @msdabbagh تا ب امروز من نتونستم کدی رو پیدا کنم که یک المنت روش هاور بشه یا کلیک بشه و بتونیم خاصیت المنت پدر رو تغییر بدیم
آقای موسوی شما نظری ندارید؟ @hesammousavi
@AliValinejad
فکر میکنم وجود نداشته باشه.
خودم با اضافه کردن class اکتیو با js هندل کردم.
اگر کد رو کامل بنویسید اگر در توانم باشه شاید بتونم کمکتون کنم یه کم گنگ هستش کد هاتون.
@msdabbagh
@AliValinejad
@mohaligateway
چطور با css وقتی input تیک خورد فقط کلاس پدرش، بکگراند بگیره؟
<div class="parent">
change bg my parent: <input type="checkbox">
<div class="parent">
change bg my parent: <input type="checkbox">
</div>
</div>کد زیر کارتون رو راه می اندازه.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="parent">
<div class="child">
<input id="darkmode" type="checkbox">
<div class="description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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 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>
<div class="darker"></div>
</div>
</div>
</div>
</body>
</html>و کد css
.parent{
width:100%;
height: 100%;
display: flex;
justify-content: center;
}
.child {
width: 250px;
}
.child input[type=checkbox] {
display: block;
margin: 0 auto;
}
.child .description {
text-align: justify;
}
#darkmode:checked ~ .darker{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
z-index: -1;
}
#darkmode:checked ~ .description{
color: #fff;
}https://jsbin.com/yegohuwiha/edit?html,css,output
@msdabbagh
@mohaligateway
خیر راه نمیندازه 😀
مثلا در کد شما میخواهیم child را انتخاب کنیم.
#darkmode:checked ~ .child{
background-color: #ddd;
}ببینید دوست عزیز این یه جور کلک هستش برای رفع این مشکل اگر شما روی کلاس child یه position: relative اضافه کنید به child محدود میشه.😀
@msdabbagh
@mohaligateway
الان کد نهایی چی میشه؟
.parent{
width:100%;
height: 100%;
display: flex;
justify-content: center;
}
.child {
width: 250px;
position: relative;
}
.child input[type=checkbox] {
display: block;
margin: 0 auto;
}
.child .description {
text-align: justify;
}
#darkmode:checked ~ .darker{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
z-index: -1;
}
#darkmode:checked ~ .description{
color: #fff;
}