Why was the background color of the two input different ?

Question

As can be seen,I didn't specify background color of input,but one is gray,ther other is white,why?

<style>
.baken {
    border:1px solid #888888;
    font-family:Trebuchet MS,Helvetica,sans-serif;
    font-size:130%;
    font-weight:bold;
    margin:3px;
    padding:2px;
}

</style>


<input type="button" class="baken" value="answer your question"/>

<input type="button" value="hello button"/>

Answer 1

You should try a DOM inspector to see if it is inheriting colors from somewhere else.

Answer 2

By specifying a border on the button, it causes the default operating-system-specific styles on the button to be removed, reverting it to some default (which seems to be gray)

You can see this in action by removing the border from your class.

Answer 3

Because specifying a border makes the browser render the button itself using a basic visual style rather than using the operating system's themes. Remove the border style and it will look like the other button.

Answer 4

The other thing to note on this, aside from the border bit, is that one of the inputs is defined using class="baken", and the other is not. Therefore, the first input button will use the style you defined and show above; the other will use either the browser default or, if you've defined a tag-level input style, the defined style.

If both your inputs used the baken class, they'd look identical aside from the text, and be basic clickable gray boxes with your borders.

If neither used the baken class, they'd look identical aside from the text, and be the browser-default or input tag-defined default style.