How can I be abke to solve this one?

How can I be abke to solve this one???

Using the type attribute selector, try to give the checkboxes in CatPhotoApp a top margin of 10px and a bottom margin of 15px, How??

.red-text { color: red; }

h2 {
font-family: Lobster, monospace;
}

p {
font-size: 16px;
font-family: monospace;
}

.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}

.smaller-image {
width: 100px;
}

.silver-background {
background-color: silver;
}

CatPhotoApp

Click here to view more cat photos.

A cute orange cat lying on its back.

Things cats love:

  • cat nip
  • laser pointers
  • lasagna

Top 3 things cats hate:

  1. flea treatment
  2. thunder
  3. other cats
Indoor Outdoor
Loving Lazy Energetic
Submit

Link to the challenge:

3 Likes

Hey Fahadah :slight_smile: i think you just have to target them in between your style tags as checkboxes using CSS syntax with the selectors using the hard brackets…that way you did it using the “type” … example
[type = ‘checkbox’] {
}

1 Like

You have to do two things.

  1. Select the checkboxes with css type selector
  2. Apply a css style that gives a top margin of 10px and a bottom margin of 15px.

The example is similar

[type='radio'] { <--selector
margin: 20px 0px 20px 0px;  <--apply a margin style
}
  1. Select radio buttons with css selector [type=‘radio’]
  2. Apply top margin 20px and bottom margin 20px
3 Likes

First, selector type should be checkbox [type=‘checkbox’]
Second, it should be in style :
[type=‘checkbox’]{
…}

Hey guys, I’m having the same problem.

I added:
[type = ‘checkbox’] {
margin: 10px…}

but it’s giving me “The type attribute selector should be used to select the checkboxes.” do you know what the problem might be?

2 Likes

Hello guys! I also encountered the same problem but I used
[type=‘checkbox’]{
margin-top: 10px;
margin-bottom: 15px;
}

And it worked. You may try to reset and use the code. Hope it works for you too! :slight_smile:

4 Likes

Thanks! After resetting the code, it worked!

1 Like

Thank you very much Akira

1 Like

Reset the code once and try the below code, it will work for sure…
[type=‘checkbox’],[type=‘checkbox’]{
margin-top: 10px;
margin-bottom: 15px;
}

[type=‘checkbox’]{

margin-top: 10px;

margin-bottom: 15px;

}

Works for me!!