Doubt about input stylization="Submit"

Asked

Viewed 7,469 times

4

I have a following class:

.rodape input{
blablabla
}

And the following HTML

<div class="rodape">
    <input type="text" />
    <input type="text" />
    <input type="submit" />
</div>

What happens, all inputs within that div will receive the settings I informed on rodape. Perfect, only, I wanted to style the input you have type="submit" also, only in a way different from others.

I don’t want to create a class just for him, I wonder if there is a way to do, informing by CSS.

css

3 answers

7


You can use in the CSS selector an attribute and its value, as well as an element like the input in this case you could use both things, you seek a input in his .rodape but it must have the attribute type=submit note that only if the value is Submit that the selector will apply.

Important remark:

What is in the rule .rodape input shall also apply to the input[type=Submit] but whatever is in the rule input[type=Submit] plevarecerá will always, ie will be more important, and only considered (if there is superscript), summarizing if you have an edge assigned in the rule .rodape input and has no edge in the rule of input[type=Submit] the edge will be applied to the button, but if there is another edge in the input[type=Submit] the edge that is in this rule that will be considered and the other will be discarded.

Example:

.rodape input {
  width: 50px;
  height: 20px;
  background-color: #f2f2f2;
  padding: 3px;
  border: 1px solid #ccc;
  color: #333;
}

.rodape input[type=submit] {
  border-radius: 5px;
  border: 1px solid #333;
  background-color: Teal;
  color: #fff;
  height: 30px;
  width: 46px;
}
<div class="rodape">
    <input type="text" />
    <input type="text" />
    <input type="submit" />
</div>

5

You can use input[type="submit"] CSS selector or or use a button and you can configure in CSS using button in the CSS selector.

  • Hmm... negative vote? I accept suggestions if something is incorrect.

1

Use input[type="submit"] so you can customize only him.

Example: .rodape input[type="submit"] { color: blue; }

Some examples click here

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.