Checked attribute does not respond with sr-only

Asked

Viewed 63 times

1

I’m hiding the <input type="radio"> with class sr-only of bootstrap, and the problem that occurs is this:

  • With class sr-only active:

    1. The radio are not unchecked if I click the other
    2. The .card gets colored when you click

  • Classless sr-only:

    1. The radio are unchecked if I click the other
    2. The .card does not get colored when clicking

What I’m trying to do is simply this:

  • By clicking on the given input, will be colored with the attribute background-color the same.

Why is this happening and how to solve?

Animation inserir a descrição da imagem aqui

HTML

<div class="form-group col-6">
    <label for="step-one-form-sex-male" data-for="step-one-form-sex-male" style="width: 100% !important;">
        <input type="radio" name="step-one-form-personal-information-sex" value="Male">
        <div class="card">
            <div class="card-body text-center">
                <img src="./dist/img/doctor_male.png" alt="" style="width: 4rem">
            </div>
            <div class="card-footer text-center py-2">
                <h7 class="card-title font-weight-bold" style="font-size: .87rem"> SOU HOMEM</h7>
            </div>
        </div>
    </label>
</div>
<div class="form-group col-6">
    <label for="step-one-form-sex-female" id="tst" data-for="step-one-form-sex-female" style="width: 100% !important;">
        <input type="radio" name="step-one-form-personal-information-sex" value="Female" class="sr-only">
        <div class="card">
            <div class="card-body text-center">
                <img src="./dist/img/doctor_female.png" alt="" style="width: 4rem">
            </div>
            <div class="card-footer text-center py-2">
                <h7 class="card-title font-weight-bold" style="font-size: .87rem">
                    SOU MULHER
                </h7>
            </div>
        </div>
    </label>
</div>

SASS

   label {
        &[data-for="step-one-form-sex-female"] {
            & {
                input {
                    &:checked + .card { 
                        @include createBorder('rounded', solid, 1px, #FF648F);

                        .card-footer {
                            @include createColor('light-rose-1', background-color);
                            @include createColor('white', color);   
                        }
                    }
                }
            }

            &:hover {
                @include media-breakpoint-lg {
                    .card {
                        @include createBorder('rounded', solid, 1px, #FF648F);
                        @include createShadow(box-shadow, 'regular');

                        .card-footer {
                            @include createColor('light-rose-1', background-color);
                            @include createColor('white', color);
                        }
                    }
                }
            }
        }
    }
css3 bootstrap-4 sass
  • 1

    Instead of putting SASS, you could put the final CSS, it helps a lot to play the scenario.

  • Interesting fact: you are using SASS, but you have defined several properties with CSS inline; you did this for some specific reason?

  • @Sam would get too big the code.

2 answers

1


You have 2 labels different, each with a data-for specific data-for="step-one-form-sex-male" and data-for="step-one-form-sex-female"

However in SASS you only put the reference to an element

label {
        &[data-for="step-one-form-sex-female"] { ....

It should be something like below, including the sex-male in the rule

label {
        &[data-for="step-one-form-sex-male"],
        &[data-for="step-one-form-sex-female"] { ....

Another problem is that the for="" of label has to be for a ID in the radio, and not any date attribute. You need to put in the for="" of label the ID of the radio you want to reach, if you put a <label for="minha-data"> and <input data="minha-data"> does not work. Your error has nothing to do with the sr-only, only by the fact that without the sr-only you can right click on radio button

To better understand the for="" recommend you read this other answer: The for attribute of a label element serves something?

inserir a descrição da imagem aqui

Follow the image code above

label[data-for="step-one-form-sex-male"] input:checked + .card,
label[data-for="step-one-form-sex-female"] input:checked + .card {
    border: 1px solid #FF648F;
background-color: rgb(253, 165, 190);
    color: #ddd;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />

<div class="form-group col-6">
    <label for="step-one-form-sex-male" data-for="step-one-form-sex-male" style="width: 100% !important;">
        <input type="radio" name="step-one-form-personal-information-sex" id="step-one-form-sex-male" value="Male">
        <div class="card">
            <div class="card-body text-center">
                <img src="./dist/img/doctor_male.png" alt="" style="width: 4rem">
            </div>
            <div class="card-footer text-center py-2">
                <h7 class="card-title font-weight-bold" style="font-size: .87rem"> SOU HOMEM</h7>
            </div>
        </div>
    </label>
</div>
<div class="form-group col-6">
    <label for="step-one-form-sex-female" id="tst" data-for="step-one-form-sex-female" style="width: 100% !important;">
        <input type="radio" name="step-one-form-personal-information-sex" value="Female" class="sr-only" id="step-one-form-sex-female">
        <div class="card">
            <div class="card-body text-center">
                <img src="./dist/img/doctor_female.png" alt="" style="width: 4rem">
            </div>
            <div class="card-footer text-center py-2">
                <h7 class="card-title font-weight-bold" style="font-size: .87rem">
                    SOU MULHER
                </h7>
            </div>
        </div>
    </label>
</div>

  • Good morning dear, thank you so much! I will post a supplement to your reply all right? I hope you like it.

  • 1

    @THIAGODEBONIS without problems my dear feel free, as it was in SASS I made only a rough adjustment to be able to answer in a simple way

0

Complementing the response of @hugocsl....

The problem really wasn’t in the class="sr-only" and yes on two issues:

  • Wrong element and selector hierarchy in SASS
  • attribute for na label and us input

Because of this my styling was not working, so to get around this problem I did the following:

HTML

<div class="form-group col-6">
    <label data-for="step-one-form-sex-male">
        <input type="radio" name="step-one-form-personal-information-sex" value="Male" class="sr-only">
        <div class="card">
            <div class="card-body">
                <img src="./dist/img/doctor_male.png" alt="">
            </div>
            <div class="card-footer">
                <h7 class="card-title">SOU HOMEM</h7>
            </div>
        </div>
    </label>
</div>
<div class="form-group col-6">
    <label data-for="step-one-form-sex-female">
        <input type="radio" name="step-one-form-personal-information-sex" value="Female" class="sr-only">
        <div class="card">
            <div class="card-body">
                <img src="./dist/img/doctor_female.png" alt="">
            </div>
            <div class="card-footer">
                <h7 class="card-title">SOU MULHER</h7>
            </div>
        </div>
    </label>
</div>

SASS

&#card-registration-step-form-personal-information {
    .form-group {
        &:nth-child(12),
        &:nth-child(13) {
            label {
                &[data-for="step-one-form-sex-male"] {
                    input {
                        &:checked {
                            + .card {
                                @include createColor('dark-blue-1', border-color);
                                @include createColor('white', color);
                                @include createShadow(box-shadow, 'regular');

                                .card-footer {
                                    @include createColor('dark-blue-1', background-color);
                                }
                            }
                        }

                        &:hover {
                            + .card { 
                                @include createColor('dark-blue-1', border-color);
                                @include createShadow(box-shadow, 'regular');
                            }
                        }
                    }
                }

                &[data-for="step-one-form-sex-female"] {
                    input {
                        &:checked {
                            + .card  {
                                @include createColor('light-rose-1', border-color);
                                @include createColor('white', color);
                                @include createShadow(box-shadow, 'regular');

                                .card-footer {
                                    @include createColor('light-rose-1', background-color);
                                }
                            }
                        }

                        &:hover {
                            + .card { 
                                @include createColor('light-rose-1', border-color);
                                @include createShadow(box-shadow, 'regular');
                            }
                        }
                    }
                }
            }
        }
    }
}

Browser other questions tagged css3 bootstrap-4 sass

You are not signed in. Login or sign up in order to post.