CODEWITHSUNDEEP
htmlcssinputcss-selectors
Samson Taylor
Samson Taylor

Reputation: 1

Make form inputs with type 'text' have a gray background

Is this the correct way to solve this simple request?

input [type="text"]{ background: gray;}

When i refresh my html, the input box that I am targeting doesn't change.

Here is the html mark up:

<input type="text" name="name" />

What am I doing wrong?

Upvotes: 0

Views: 10644

Answers (2)

Nishant Tamilselvan
Nishant Tamilselvan

Reputation: 322

Here is some Detailed Example.

<!DOCTYPE html>
<html>

<head>
  <style>
    input[type=text] {
      width: 200px;
      display: block;
      margin-top: 10px;
      margin-bottom: 10px;
      background-color: gray;
      color: white;
    }
    input[type=button] {
      width: 120px;
      margin-left: 80px;
      display: block;
    }
  </style>
</head>

<body>

  <form name="input" action="" method="post">
    Name:
    <input type="text" name="Name" value="Your Name" size="20">

    <input type="button" value="Submit">
  </form>

</body>

</html>

Upvotes: 0

Kieran McClung
Kieran McClung

Reputation: 724

You just need to remove the space after input else the style is applied to [type="text"] contained within input

input[type="text"] {
    background: gray;
}

A bit of extra information

<a href="#" class="button">Text</a>

The anchor element above has a class of .button so to make the text red you would need the following:

a.button {
    //No space
    color: red;
}

If you now add a space between the a and .button selector this would no longer work because you're essentially saying "Look inside the a element for .button".

a .button {
    //Space
    color: red;
}

However the below would work because .button is now nested inside the a element.

<a href="#"><span class="button">Text</span></a>

I've also attached the jsfiddle by zfrisch: https://jsfiddle.net/0kcvb3d6/

Upvotes: 3

Related Questions