css input sorunu

02.05.2020 13:19

karolla WM Aracı Kullanıcı

Üyelik 22.06.2012
Yaş/Cinsiyet 38 / E
Meslek Yazar
Konum

Ad Soyad A** E**
Mesajlar 398
Beğeniler 13 / 67
Ticaret 6, (%100)

Merhaba arkadaşlar, ufak bir sorunum var ben çözemedim belki bir bilen vardır. Sorun şöyle. Aşağıdaki codependeki radio butonu aldım çalışıyor da. Fakat bu kodu background rengi verdiğim bir divin içinde kullanınca bozuluyor.

https://codepen.io/raubaca/pen/ONzBxP

Yukarıdaki standart hali. Şimdi sayfadan

.group {

  display: flex;

  align-items: center;

  margin-bottom: 2em;

}

kısmını

.group {

  display: flex;

  align-items: center;

  margin-bottom: 2em;

background-color: #ffcc00;

}

şeklinde değiştirin. Bu durumda radio butona tıkladığınızda labelin border ve arkaplanını göstermeyecektir.

02.05.2020 13:33

#2

Ozi . Kullanıcı

Üyelik 10.12.2012
Yaş/Cinsiyet 29 / E
Meslek Devoloper
Konum Almanya

Ad Soyad H** K**
Mesajlar 3052
Beğeniler 1 / 941
Ticaret 50, (%100)

İnput veya radio butona arkaplan vermek için input[type..] olarak ilgili div ile beraber kullanman gerekir. Bu şekilde komple group divine kod yazarsan bozulması normal

02.05.2020 13:37

#3

karolla WM Aracı Kullanıcı

Üyelik 22.06.2012
Yaş/Cinsiyet 38 / E
Meslek Yazar
Konum

Ad Soyad A** E**
Mesajlar 398
Beğeniler 13 / 67
Ticaret 6, (%100)

Ozi adlı üyeden alıntı

İnput veya radio butona arkaplan vermek için input[type..] olarak ilgili div ile beraber kullanman gerekir. Bu şekilde komple group divine kod yazarsan bozulması normal

Aşağıdaki gibi veriyorum. Zaten inputa değil labele veriyorum. Dive arkaplan rengi vermezsem sorunsuz çalışıyor. Ama dive renk verirsem üstüne basıyor.

       .wegg-form-group input[type="checkbox"]:checked + label:before,

        .wegg-form-group input[type="radio"]:checked + label:before {

            top: 0;

            width: 100%;

            height: 2em;

background-color:#ffcc00;

border-color:#ffcc00;

        }

02.05.2020 13:51

#4

rws WM Aracı Kullanıcı

Üyelik 23.10.2012
Yaş/Cinsiyet 37 / E
Meslek kimyager
Konum İstanbul Anadolu

Ad Soyad E** B**
Mesajlar 666
Beğeniler 94 / 138
Ticaret 2, (%100)

label:before {

       z-index: 44;

}

buradaki z index arttırılacak

wordpress-html-css-web işleri yapılır

02.05.2020 22:32

#5

karolla WM Aracı Kullanıcı

Üyelik 22.06.2012
Yaş/Cinsiyet 38 / E
Meslek Yazar
Konum

Ad Soyad A** E**
Mesajlar 398
Beğeniler 13 / 67
Ticaret 6, (%100)

rws adlı üyeden alıntı

label:before {

       z-index: 44;

}

buradaki z index arttırılacak

Labelin içindeki metin rengi okunmuyor bu sefer de.

02.05.2020 23:35

#6

rws WM Aracı Kullanıcı

Üyelik 23.10.2012
Yaş/Cinsiyet 37 / E
Meslek kimyager
Konum İstanbul Anadolu

Ad Soyad E** B**
Mesajlar 666
Beğeniler 94 / 138
Ticaret 2, (%100)

karolla adlı üyeden alıntı

Labelin içindeki metin rengi okunmuyor bu sefer de.

bu şekilde şekilde olmuyor, kodunuzu da tam bilmiyorum
::before kısmını iptal edip alttaki gibi yapmanız lazım:

input[type="checkbox"]:checked + label, input[type="radio"]:checked + label {

    padding-left: 1em;

    color: #8e44ad;

    background: white;

    border-radius: 1rem;

}

wordpress-html-css-web işleri yapılır

03.05.2020 02:40

#7

karolla WM Aracı Kullanıcı

Üyelik 22.06.2012
Yaş/Cinsiyet 38 / E
Meslek Yazar
Konum

Ad Soyad A** E**
Mesajlar 398
Beğeniler 13 / 67
Ticaret 6, (%100)

rws adlı üyeden alıntı

bu şekilde şekilde olmuyor, kodunuzu da tam bilmiyorum
::before kısmını iptal edip alttaki gibi yapmanız lazım:

input[type="checkbox"]:checked + label, input[type="radio"]:checked + label {

    padding-left: 1em;

    color: #8e44ad;

    background: white;

    border-radius: 1rem;

}

Hocam sanırım anlatamadım. Aşağıdaki gibi .group classına background verince, labelin borderının üzerine basıyor. Bunu çözemedim.

.group {

  display: flex;

  align-items: center;

  margin-bottom: 2em;

  background-color:#fff;

}

03.05.2020 12:27

#8

rws WM Aracı Kullanıcı

Üyelik 23.10.2012
Yaş/Cinsiyet 37 / E
Meslek kimyager
Konum İstanbul Anadolu

Ad Soyad E** B**
Mesajlar 666
Beğeniler 94 / 138
Ticaret 2, (%100)

https://jsbin.com/yuriroyoxa/1/edit?css,output

wordpress-html-css-web işleri yapılır

04.05.2020 20:04

#9

karolla WM Aracı Kullanıcı

Üyelik 22.06.2012
Yaş/Cinsiyet 38 / E
Meslek Yazar
Konum

Ad Soyad A** E**
Mesajlar 398
Beğeniler 13 / 67
Ticaret 6, (%100)

rws adlı üyeden alıntı

https://jsbin.com/yuriroyoxa/1/edit?css,output

Açılmıyor site.

04.05.2020 20:45

#10

rws WM Aracı Kullanıcı

Üyelik 23.10.2012
Yaş/Cinsiyet 37 / E
Meslek kimyager
Konum İstanbul Anadolu

Ad Soyad E** B**
Mesajlar 666
Beğeniler 94 / 138
Ticaret 2, (%100)

https://codepen.io/ersinb/pen/BaoJyXm

wordpress-html-css-web işleri yapılır

css input sorunu

Üye Girişi Yap