Attribute Selectors to Style Elements [type=‘’]

Attribute Selectors to Style Elements [type=‘’]
0

#1

Tell us what’s happening:

When I try applying the type attribute [type=‘‘] my apostrophes are not automatic and do not turn blue to indicate it is selecting something but when I do not use them they have an effect on the app but it wont let me continue. Help?

Your code so far


<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .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;
  }
  
  [type=’checkbox‘] {
    margin: 10px 0px 15px 0px;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>
<main>
  <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
  
  <a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
  
  <div class="silver-background">
    <p>Things cats love:</p>
    <ul>
      <li>cat nip</li>
      <li>laser pointers</li>
      <li>lasagna</li>
    </ul>
    <p>Top 3 things cats hate:</p>
    <ol>
      <li>flea treatment</li>
      <li>thunder</li>
      <li>other cats</li>
    </ol>
  </div>
  
  <form action="/submit-cat-photo" id="cat-photo-form">
    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
    <label><input type="checkbox" name="personality" checked> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality"> Energetic</label><br>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</main>

Your browser information:

User Agent is: Mozilla/5.0 (iPad; CPU OS 11_4_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.0 Mobile/15E148 Safari/604.1.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/basic-css/use-attribute-selectors-to-style-elements/


#2

Try double quotes here.

It seems you copied the quotes from somewhere.
Hope that helps.


#3

I type it in as ——> [type=‘’] or [type=“”] but see the apostrophes are not automatic on either single or double I have no idea why still


#4

Try this in your code:

[type="checkbox"]{
   ..... your style here.......
}

Instead of this try using margin-top and margin-bottom properties.
Does that help?


#5

Your quote in the [type=‘checkbox’] is incorrect.

You have a symbol that looks like it was copied out of Word, it is not a ’ straight up and down quote. For uses in coding the “styled” quotation marks for the most part are not recognized as one in the same as a straight up and down quote. I hope this makes sense, but for the most part copying from Word to an editor doesn’t work as the characters referenced in the map (quotations mostly, but also noticed with the =, -, etc.) are not the same for some reason.


#6

Try this:

[type='checkbox'] {
    margin: 10px 0 15px 0;
  }

#7

I got it thanks guys!