سلکت کردن المنت در css

1 هفته پیش توسط moha li آپدیت شد
آفلاین
user-avatar
علی ولی‌نژاد ( 39604 تجربه )
2 هفته پیش
تخصص : طراح گرافیک و برنامه نویس

لینک کوتاه اشتراک گذاری

2

سلام دوستان خسته نباشید من روی پروژه دکمه شخصی سازی شده و تم دارک مود تمرین میکردم ولی هرچقدر تلاش میکنم نمیتونم المنت پدر رو سلکت کنم کدم رو قرار میدم از دوستان اگر میتونید کمک کنید
این کد های 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%;

اینم لینک JS Bin پروژه

آفلاین
user-avatar
moha li ( 97165 تجربه )
2 هفته پیش
تخصص : توسعه دهنده لاراول و Vue

لینک کوتاه اشتراک گذاری

0

سلام
کد جاوا اسکریپت موجود نیست توی js bin
@AliValinejad

آفلاین
user-avatar
محمدسجاد دباغ ( 11639 تجربه )
2 هفته پیش
تخصص : برنامه نویس وب

لینک کوتاه اشتراک گذاری

2

سلام دوست عزیز!

#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%"});
   }
});
آفلاین
user-avatar
علی ولی‌نژاد ( 39604 تجربه )
2 هفته پیش
تخصص : طراح گرافیک و برنامه نویس

لینک کوتاه اشتراک گذاری

2

من میخاستم بدون js کارمو راه بندازم الان یه مثال دیگه میزارم براتون که با چک باکس ساده و بدون js کار میکنه!

آفلاین
user-avatar
علی ولی‌نژاد ( 39604 تجربه )
2 هفته پیش
تخصص : طراح گرافیک و برنامه نویس

لینک کوتاه اشتراک گذاری

2

https://jsbin.com/fagilax/edit?html,css,output
این رو مشاهده کنید! بدون Js کار میکنه الان من میخام چک باکس رو شخصی سازی کنم!

آفلاین
user-avatar
moha li ( 97165 تجربه )
2 هفته پیش
تخصص : توسعه دهنده لاراول و Vue

لینک کوتاه اشتراک گذاری

0

می تونید المان 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;
}

@AliValinejad

</body></html>

آفلاین
user-avatar
محمدسجاد دباغ ( 11639 تجربه )
1 هفته پیش
تخصص : برنامه نویس وب

لینک کوتاه اشتراک گذاری

0

سلام @AliValinejad
اگر جوابش رو پیدا کردی بگو 😀 منم نیازم شد

آفلاین
user-avatar
moha li ( 97165 تجربه )
1 هفته پیش
تخصص : توسعه دهنده لاراول و Vue

لینک کوتاه اشتراک گذاری

0

سلام
این موردی که بیان شد کار می کنه خودم تستa کردم.
@msdabbagh

آفلاین
user-avatar
محمدسجاد دباغ ( 11639 تجربه )
1 هفته پیش
تخصص : برنامه نویس وب

لینک کوتاه اشتراک گذاری

0

@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 پدرش بکگراند بگیره

آفلاین
user-avatar
علی ولی‌نژاد ( 39604 تجربه )
1 هفته پیش
تخصص : طراح گرافیک و برنامه نویس

لینک کوتاه اشتراک گذاری

2

سلام @msdabbagh تا ب امروز من نتونستم کدی رو پیدا کنم که یک المنت روش هاور بشه یا کلیک بشه و بتونیم خاصیت المنت پدر رو تغییر بدیم
آقای موسوی شما نظری ندارید؟ @hesammousavi

آفلاین
user-avatar
محمدسجاد دباغ ( 11639 تجربه )
1 هفته پیش
تخصص : برنامه نویس وب

لینک کوتاه اشتراک گذاری

1

@AliValinejad
فکر میکنم وجود نداشته باشه.
خودم با اضافه کردن class اکتیو با js هندل کردم.

آفلاین
user-avatar
moha li ( 97165 تجربه )
1 هفته پیش
تخصص : توسعه دهنده لاراول و Vue

لینک کوتاه اشتراک گذاری

0

اگر کد رو کامل بنویسید اگر در توانم باشه شاید بتونم کمکتون کنم یه کم گنگ هستش کد هاتون.
@msdabbagh
@AliValinejad

آفلاین
user-avatar
محمدسجاد دباغ ( 11639 تجربه )
1 هفته پیش
تخصص : برنامه نویس وب

لینک کوتاه اشتراک گذاری

1

@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>
آفلاین
user-avatar
moha li ( 97165 تجربه )
1 هفته پیش
تخصص : توسعه دهنده لاراول و Vue

لینک کوتاه اشتراک گذاری

2

کد زیر کارتون رو راه می اندازه.

<!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

آفلاین
user-avatar
محمدسجاد دباغ ( 11639 تجربه )
1 هفته پیش
تخصص : برنامه نویس وب

لینک کوتاه اشتراک گذاری

0

@mohaligateway
خیر راه نمیندازه 😀
مثلا در کد شما میخواهیم child را انتخاب کنیم.

#darkmode:checked ~ .child{
   background-color: #ddd;
}
آفلاین
user-avatar
moha li ( 97165 تجربه )
1 هفته پیش
تخصص : توسعه دهنده لاراول و Vue

لینک کوتاه اشتراک گذاری

0

ببینید دوست عزیز این یه جور کلک هستش برای رفع این مشکل اگر شما روی کلاس child یه position: relative اضافه کنید به child محدود میشه.😀
@msdabbagh

آفلاین
user-avatar
محمدسجاد دباغ ( 11639 تجربه )
1 هفته پیش
تخصص : برنامه نویس وب

لینک کوتاه اشتراک گذاری

0

@mohaligateway
الان کد نهایی چی میشه؟

آفلاین
user-avatar
moha li ( 97165 تجربه )
1 هفته پیش
تخصص : توسعه دهنده لاراول و Vue

لینک کوتاه اشتراک گذاری

-1
.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;
}

@msdabbagh

برای ارسال پاسخ لازم است، ابتدا وارد سایت شوید.