Doubt over stylization of input="submit"

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 the inputs inside this div will receive the definitions I gave in rodape . Perfect, but I wanted to stylize the input that has type="submit" also, but in a different way from the others.

I do not want to create a class just for it, I would like to know if there is a way to do it, reporting by CSS.

    
asked by anonymous 24.11.2014 / 17:25

3 answers

6

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

Important note:

What is in the .rodape input rule will also be applied to the input [type = submit] rule however input submit ] will always be more important, and only considered (if overwritten), summarizing if you have a border assigned in the .rodape input rule and has no border in the rule of input [type = submit] the border will be applied to the button, however if there is another border in the input [type = submit] rule 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>
    
24.11.2014 / 17:37
5

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

    
24.11.2014 / 17:27
1

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

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

Some examples click here

    
24.11.2014 / 17:27