JavaScript CSS Selectors Quickstart CSS Selector Basics Attribute Selectors Challenge

CSS Selectors Quickstart Challenge Task 2 of 4

I put input[type = 'password'] { color : #ccc; } as the answer to challenge task 2 of 4, and it does target the right selector and shows that the text color of the password form changed, yet it's giving me an error.

style.css
/* Complete the challenge by writing CSS below */
img[title='avatar'] {
  border-radius : 50%;
}

input[type = 'password'] {
    color : #ccc;
}
index.html
<!DOCTYPE html>
<html>
<head>
    <title>Attribute Selectors</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="page.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="container">
        <form class="form-contact">
        <img src="avatar.png" title="avatar" alt="user">

          <label for="un">Username:</label> 
          <input type="text" id="un">

        <label for="pw">Password:</label>
            <input type="password" id="pw">

          <input type="submit" value="Sign up">
            <input type="reset" value="Reset">
        </form>
    </div>
</body>
</html>

1 Answer

Hi Samuel!

Having a space between the property name and the colon keeps it from passing, evidently.

This passes all the tasks:

/* Complete the challenge by writing CSS below */
img[title='avatar'] {
  border-radius: 50%;
}

input[type='password'] {
  color: #ccc;
}

input[type='submit'] {
  background-color: #52bab3;
}

input[type='reset'] {
  background-color: tomato;
}

I hope that helps.

Stay safe and happy coding!