جشنواره عیدانه راکت | عضویت ویژه راکت برای آخرین بار | افزایش قیمت‌ها از سال جدید | و ...

مشاهده اطلاعات بیشتر...
ثانیه
دقیقه
ساعت
روز
علی ولی‌نژاد
3 سال پیش توسط علی ولی‌نژاد مطرح شد
17 پاسخ

سلکت کردن المنت در 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%;

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


ثبت پرسش جدید
moha li
تخصص : توسعه دهنده لاراول و Vue
@mohaligateway 3 سال پیش مطرح شد
0

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


محمدسجاد دباغ
تخصص : برنامه نویس لاراول
@mdabbagh 3 سال پیش مطرح شد
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%"});
   }
});

علی ولی‌نژاد
تخصص : طراح گرافیک و برنامه نویس
@AliValinejad 3 سال پیش مطرح شد
1

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


علی ولی‌نژاد
تخصص : طراح گرافیک و برنامه نویس
@AliValinejad 3 سال پیش مطرح شد
2

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


moha li
تخصص : توسعه دهنده لاراول و Vue
@mohaligateway 3 سال پیش آپدیت شد
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>


محمدسجاد دباغ
تخصص : برنامه نویس لاراول
@mdabbagh 3 سال پیش مطرح شد
0

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


moha li
تخصص : توسعه دهنده لاراول و Vue
@mohaligateway 3 سال پیش آپدیت شد
0

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


محمدسجاد دباغ
تخصص : برنامه نویس لاراول
@mdabbagh 3 سال پیش آپدیت شد
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 پدرش بکگراند بگیره


علی ولی‌نژاد
تخصص : طراح گرافیک و برنامه نویس
@AliValinejad 3 سال پیش مطرح شد
2

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


محمدسجاد دباغ
تخصص : برنامه نویس لاراول
@mdabbagh 3 سال پیش مطرح شد
1

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


moha li
تخصص : توسعه دهنده لاراول و Vue
@mohaligateway 3 سال پیش مطرح شد
0

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


محمدسجاد دباغ
تخصص : برنامه نویس لاراول
@mdabbagh 3 سال پیش مطرح شد
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>

moha li
تخصص : توسعه دهنده لاراول و Vue
@mohaligateway 3 سال پیش مطرح شد
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


محمدسجاد دباغ
تخصص : برنامه نویس لاراول
@mdabbagh 3 سال پیش مطرح شد
0

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

#darkmode:checked ~ .child{
   background-color: #ddd;
}

moha li
تخصص : توسعه دهنده لاراول و Vue
@mohaligateway 3 سال پیش مطرح شد
0

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


محمدسجاد دباغ
تخصص : برنامه نویس لاراول
@mdabbagh 3 سال پیش مطرح شد
0

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


moha li
تخصص : توسعه دهنده لاراول و Vue
@mohaligateway 3 سال پیش مطرح شد
-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


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام