CODEWITHSUNDEEP
htmlcss
NawaMan
NawaMan

Reputation: 25687

Input border change when background image is added

When I add background image to an input, its border changed too.

enter image description here

So now my button looks different from other.

How can I make them look the same?

Here is the JsFriddle for this problem

http://jsfiddle.net/apLm5rgq/1/

But basically it is 

<input id='one'  value='One'/>
<br/>
<input id='two'  value='Two'/>

and

input {
    text-align: right
}
#two {
    background-image:  url(http://www.dhtmlgoodies.com/tips-and-tricks/input-with-background/images/magnifying-glass.gif);
    background-repeat: no-repeat;
}

Thanks you all in advance.

Upvotes: 1

Views: 768

Answers (1)

misterManSam
misterManSam

Reputation: 24692

To maintain the default input style, set the border-width and border-style for the inputs explicitly. This works in Chrome and IE - in Firefox it changes the border color slightly from default, but the style is consistent across all text inputs. This gets you 90% of the result you want.

Updated - Have a basic fiddle!

input {
    border-width: 1px;
    border-style: inset outset outset inset; 
    /* 
     Seems to be most browsers default (tested on Windows)
    */
}

The documentation over on the MDN may be useful to you.

You can also set your own border on inputs for a consistent look across browsers and operating systems.

Have a nicer fiddle!

input {
    text-align: right;
    border: solid 1px #ADA9A5;
    border-radius: 3px;
    padding: 5px;
    margin: 10px;
}

Also, position your background with background-position to compensate for the inputs padding.

#two {
    background-position: 5px;
}

Screenshot

Upvotes: 6

Related Questions