Reset Styles for input elements and restyling to bring back the default appearance
Solution 1
You can't get the default styles back once you change them. If you want to normalize the margins and padding across browsers, just normalize the margins and padding and don't touch any of the other styles, especially border and background.
Solution 2
Short answer is change
border: 1px inset #F0F0F0;
to
border: 1px solid #A9A9A9;
Long Answer
I feel there is a better answer to the problem that the OP had in their fiddle.
The problem was with their use of inset
instead of solid
.
Here is the original js Fiddle code:
input
{
padding: 0;
margin: 0;
}
input[name="1"]
{
margin: 10px;
}
input[name="2"]
{
border: none;
border: 0;
border: 1px inset #F0F0F0;
}
<input name="1" onfocus="this.value=''" type="text" size="20" value="input 1" title="Enter your search here" />
<input name="2" onfocus="this.value=''" type="text" size="20" value="input 2" title="Enter your search here" />
Here is the fix that I believe the OP was looking for:
input
{
padding: 0;
margin: 0;
}
input[name="1"]
{
margin: 10px;
}
input[name="2"]
{
border: 1px solid #A9A9A9;
}
<input name="1" onfocus="this.value=''" type="text" size="20" value="input 1" title="Enter your search here" />
<input name="2" onfocus="this.value=''" type="text" size="20" value="input 2" title="Enter your search here" />
All I changed was the
input[name="2"]
{
border: none;
border: 0;
border: 1px inset #F0F0F0;
}
to
input[name="2"]
{
border: 1px solid #A9A9A9;
}
There is no need to set border to none then set it to 0 and then set it to your desired settings. The only reason to do this would to be if there were different fallback options necessary for different browsers. But as far as I know all browsers that should be considered support the basic border property with the shorthand above.
As for the actual settings that I changed, the inset
gives you that old 3D-ish looking cut in look and the color was too close to the jsFiddle background plus this color looks closer to the default I see in most browsers.
Jawad
Updated on September 15, 2022Comments
-
Jawad over 1 year
I have a simple input field.
<input name="1" onfocus="this.value=''" type="text" size="20" value="input 1" title="Enter your search here" />
Because different browsers add different amounts of padding, margin and border to it, I have to reset it as follows.
input { padding: 0; margin: 0; border: 0; border: none; }
Now I have a unstyled (leaving other properties such as font-size or cursor alone for the movement) and I want to bring back the appearnce that were default before the reset but with consistant values so that the appearance as well as the dimensions are same in all browsers. I do
input { border: 1px inset #F0F0F0; }
However it changes something and the appearnce is not the same as per this fiddle where the first input (input 1) has not been reset with the border property while the second input (input 2) has been reseted (border: 0; border: none;) and again restyled (border: 1px inset #F0F0F0;).
How do I get the same appearance back after applying a style reset to it.
-
Jawad over 11 yearsBut IE applies 1px border, FF 2px and GG 3px or something like that!
-
BoltClock over 11 yearsThat's just how they style their buttons. You can't change it without losing the default style because those are their individual defaults.
-
BoltClock over 11 yearsYes even if you change the border width only. That's just how it works I'm afraid.
-
alejnavab over 7 yearsBut you can clear WebKit Browser's appearance with
-webkit-appearance: none;
. -
BoltClock over 7 years@alej27: The question is asking how to get the default appearance. Your suggestion does the complete opposite.