CODEWITHSUNDEEP
cssbuttoninput
CheckLife
CheckLife

Reputation: 23

How do i target an input button by a class

I am trying to target an input button by the class, however when i call the class in my CSS it does not work. How can this be done? So When i call the stat class in my input button it doesn't work.

CSS

* {
margin: 0;
padding: 0;
list-style-type: none;
text-decoration: none;
}

header, nav, section, aside, footer, article {
display: block;
}

body {

}

.container {
margin:0px auto;
background-image: url(back.png);
width: 1200px;
padding-top:10px;
height: 2000px;
}

.thenav {
background-color: #3b63d3;
height: 85px;
opacity: 0.9;
position: relative;
}

input[type=text], input[type=password] {
font-weight: bold;
margin: 0;
font-size: 8px;
height: 10px;
padding: 3px 5px 3px 5px;
color: 162354;
}

/* Stats Button */
form input[type=button] {
background-color: #6cd171;
color: blue;
border-radius: 6px;
font-weight: bold;
border: none;
margin-top: 20px;
margin-left: 20px;
padding: 2px 2px;
font-family: Verdana, Geneva, sans-serif;
 }

.stat input[type=button] {
background-color: grey;
color: #008cff;
border-radius: 6px;
font-weight: bold;
border: none;
padding: 1px 2px 2px 2px;
}

HTML

<span>put html code here</span>

Upvotes: 0

Views: 7044

Answers (2)

hungerstar
hungerstar

Reputation: 21725

When you have a space between .stat and input you're looking to select an input element that is a child of .stat. You need to combine the two selectors.

Use input[type="button"].stat {}.

Below is a general example of how selector relationships work. Notice that your original CSS selector behaved like the third example.

/* Targets ANY element with a class of .stat */
.stat {
  color: red;
}

/* Targets ANY input element with a class of .stat */
input.stat {
  color: green;
}

/* Targets ANY input inside of an element with a class of .stat */
.stat input {
  color: blue;
}
<input class="stat" type="text" name="text-0" value="123abc">

<div class="stat">
  
  <p>
    My text is red. I inherited my color from <code>.stat</code>.
  <p>
  
  <input type="text" name="text-1" value="123abc">
  
</div>

Upvotes: 1

LIJIN SAMUEL
LIJIN SAMUEL

Reputation: 883

no need for space when the class is in the input.

input[type=button].stat{} or .stat{}

Upvotes: 1

Related Questions