I came across a little browser compatibility issue.
i have a search input field <input type="search">
and while in Chrome the height is exactly as i want it to be (30px),
the height in IE is always 2px more (32px)
heres the css code:
.search_field{
width: 80%;
height: 30px;
border: solid;
border-width: 1px;
border-color: #eeeeee;
margin: 5px 0 5px 0;
padding: 0px;
}
.search_field:focus{
outline-width: 1px;
outline-style: solid;
outline-color: #919191;
}
html:
<li>
<b>Search</b><span style="float: right; font-size: 10px;">Advanced Search</span><br>
<input type="search" class="search_field">
<input type="submit" value="Search" class="search_input">
</li>
Are there any other IE defaults besides those i already tried to change?
Thanks!
I think, it's because of border you are adding with it. So, 1px from top and 1px from bottom, this way it's taking 2px more than it. Try fixing this once.
if not even this works, then you can add some css hacks like:
_height : 28px; /* IE 6 */
*height: 28px; /* IE 7 */
Note: Keep this in mind that these are not valid css. I mean when you will validate it, it won't. Take reference: http://www.javascriptkit.com/dhtmltutors/csshacks3.shtml
Are there any other IE defaults besides those i already tried to
change?
You can easily inspect your element style attributes using The IE Developer tool.
Just hit the F12 key and inspect your input search field.
Click the arrow button inside of the Developer Toolbar window at the bottom of the screen and select which Element needs to be inspected by placing the cursor over the Element and then click on that Element
Add the following CSS code, as suggested by #Passerby in a comment:
.search_field { box-sizing: border-box; }
The reason is that otherwise the height property specifies the content width, excluding padding and border, and the 1px borders above and below thus make the total height 30 + 1 + 1 pixels. The box-sizing property can be used to override this.
Arguably, IE (and Firefox) is doing the right thing here, since the HTML5 CR says, in the section about form field rendering, that in “standards mode”, an input element with type=search has normal CSS sizing, whereas in Chrome, it has box-sizing: border-box in the browser style sheet.
Related
I'm trying to align a submit button (input type="submit") with a text input (input type="text") but in Chrome the submit button is always slightly smaller.
Here's the HTML:
<input type="email" placeholder="Secret Sale ♥ Enter your email" name="MERGE0" class="email" size="22" value="">
<input type="submit" class="button" name="submit" value="Join">
And here's the CSS:
#header-top .newsletter .email, #header-top .newsletter .button { font-size: 12px; line-height: normal; box-sizing: border-box; padding: 5px; }
As you can see I've tried setting the padding and line-height to be the same for both elements, and after reading around on Stackoverflow I've seen references to setting the box-sizing too which unfortunately hasn't made any difference.
Here it is in IE (fine):
And in Firefox (also fine):
And finally in Chrome (button too small, or text input too big?):
Here's the live site if it helps too: http://www.arabel.co.uk/about-arabel/faqs
Any help with this would be much appreciated, I'm completely stumped as to why it's bigger in Chrome. Thanks!
Chrome is adding a default 2px border to your textbox due to some reason. Your text box and button both have the same padding, but the text box has a 2px border and the button has a 1px border. A quick fix would be to add an individual padding of 5px to ".email".. everything looks a okay. If you change it in the common css line, then both items will get the padding, and they will still be skewed.
#header-top .newsletter .email{
padding: 4px;
}
And make sure you add this after the line that defines the css for both .email and .button, so that this will overwrite the 5px padding.
Alternatively, you can also do away with that combined css altogether and add individual padding or 4px for .email and 5px for .button
Likely hasn't something to do with browser default styles.
You could try including a reset.css in your page.
http://meyerweb.com/eric/tools/css/reset/
It could have unattended effects else where though.
I'm trying to make a search bar that will look nice. What I did is, I made an image of an search bar and I'm adding the image to the back-ground of the input and I'm editing the place and the size that the font will appear.
The only thing that I can't find a way to edit is the small 'x' button that appears when I'm using input type search.
I want to move it a little bit left so it will fix my search bar image.
Here is my HTML:
<input id="search" name="Search" type="search" value="Search" />
Here is my CSS:
#search{
width: 480px;
height: 49px;
border: 3px solid black;
padding: 1px 0 0 48px;
font-size: 22px;
color: blue;
background-image: url('images/search.jpg');
background-repeat: no-repeat;
background-position: center;
outline: 0;
}
For anyone finding themselves here (as I did) thinking "how do I inspect this element to apply custom styles?", you'll need to enable the user agent shadow DOM to make these vendor elements accessible.
For WebKit (Safari) & Blink (Chrome,Edge,Opera,Brave) browsers, follow these steps:
Open DevTools (Ctrl+Shift+I)
Find the gear icon, top-right and click to open up the dropdown menu
In the context menu that opens, under "Preferences", find "Elements" towards the bottom and enable "Show user agent shadow DOM"
As you can see, I'm a man of culture, if there is a dark theme, I use it
Styling the "x" cancel search button in Webkit browsers
Assuming you're talking about "Cancel search" [X] icon that appeas in Webkit browsers only (Chrome, Safari, Opera) you can use -webkit-search-cancel-button pseudo-element. E.g:
#Search::-webkit-search-cancel-button{
position:relative;
right:20px;
}
Demo: http://jsfiddle.net/5XKrc/1/
Screenshot:
Using this approach you can even create your own cancel button, for example this style:
#Search::-webkit-search-cancel-button{
position:relative;
right:20px;
-webkit-appearance: none;
height: 20px;
width: 20px;
border-radius:10px;
background: red;
}
Instead of [X] will create a red circle.
Demo http://jsfiddle.net/5XKrc/3/
Screenshot:
For IE10 and above you can use following to move the button:
#Search::-ms-clear{
margin-right:20px
}
Oh and do use placeholder="Search" instead of value="Search" - it will display word "search" when input is empty - and will automatically remove it when user types something.
2022 Cross-browser consistent approach
Here is a cross-browser implementation of the Clear Search "x" button, It uses the solid times-circle SVG from FontAwesome for the icon and works for both dark and light backgrounds. It also standardizes Safari to adopt the Chrome implementation to only show the icon when the form field has focus.
input[type="search"] {
border: 1px solid gray;
padding: .2em .4em;
border-radius: .2em;
}
input[type="search"].dark {
background: #222;
color: #fff;
}
input[type="search"].light {
background: #fff;
color: #222;
}
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
height: 1em;
width: 1em;
border-radius: 50em;
background: url(https://pro.fontawesome.com/releases/v5.10.0/svgs/solid/times-circle.svg) no-repeat 50% 50%;
background-size: contain;
opacity: 0;
pointer-events: none;
}
input[type="search"]:focus::-webkit-search-cancel-button {
opacity: .3;
pointer-events: all;
}
input[type="search"].dark::-webkit-search-cancel-button {
filter: invert(1);
}
<input type="search" placeholder="search" class="light">
<input type="search" placeholder="search" class="dark">
NB 1. This S.O. question is explicitly about the clear button pseudo element, which is only supported in Webkit-based browsers (Edge, Safari, and Chrome). Currently (2022) Firefox supports the search clear button behind a feature flag only. Until Firefox releases this feature publicly, the only true cross-browser approach that supports Firefox is via a workaround that leverages HTML+CSS with an absolutely positioned <input type="reset"> to clear the entire form when clicked. See stackoverflow.com/a/37846330 Note that this workaround will clear all radio/checkbox selections and other fields if your search form has more than just a single search field.
NB 2. your mileage may vary in Edge, which is also Webkit–based. In my testing (via BrowserStack) some versions of Edge did not support setting a background-image: url() in the ::-webkit-search-cancel-button pseudo-class.
I want to move [the small 'x' icon] a little bit left so it will fix my search bar image.
Users expect things not to move much is UIs. If you decide to move the 'x' icon consider using pseudo-classes and move your search icon instead:
If the search icon is embedded your background image move it into a second image with role="presentation" attribute and place it immediately after your input in the markup:
<input id="search" name="Search" type="search" value="Search" />
<svg role="presentation" class="i-search" viewBox="0 0 32 32" width="14" height="14" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3">
<circle cx="14" cy="14" r="12" />
<path d="M23 23 L30 30" />
</svg>
Position it where the user expects:
#search + svg {
margin-left: -30px;
margin-bottom: -2px;
}
Then hide and show it using the :placeholder-shown pseudo-classes:
#search + svg {
visibility: hidden;
}
#search:placeholder-shown + svg {
visibility: visible;
}
You may style the 'x' icon if you wish. But you might not want to anymore.
Does a simple "X" with a dark or light backdrop using a single block of CSS rules. Run code snippet to see example.
/* light backdrops only */
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
display: inline-block;
width: 12px;
height: 12px;
margin-left: 10px;
background:
linear-gradient(45deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 43%,#000 45%,#000 55%,rgba(0,0,0,0) 57%,rgba(0,0,0,0) 100%),
linear-gradient(135deg, transparent 0%,transparent 43%,#000 45%,#000 55%,transparent 57%,transparent 100%);
}
/* dark backdrops only */
input[type="search"][value="dark"]::-webkit-search-cancel-button {
background:
linear-gradient(45deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 43%,#fff 45%,#fff 55%,rgba(0,0,0,0) 57%,rgba(0,0,0,0) 100%),
linear-gradient(135deg, transparent 0%,transparent 43%,#fff 45%,#fff 55%,transparent 57%,transparent 100%);
}
<input type="search" value="light">
<input type="search" value="dark" style="background:black; color:white;">
Ref: https://stackoverflow.com/a/52141879/8762323
#input[type="search"]::-webkit-search-cancel-button {
// Using the two lines below will allow you to insert a image
-webkit-appearance: none;
-webkit-user-modify: read-write !important;
height: 28px;
content: url("clear button.png");
Just to highlight better how to figure out such kinds of things by ourselves. As shown and mentioned in #UncaughtTypeError answer above
https://stackoverflow.com/a/58484957/7668448
Also in the last section I do go to show how to do different things including changing the color. And with examples.
I loved the answer because it was teaching us how to fish rather than here is the fish
I want to clarify that further for others. Who may didn't notice.
By enabling the show user agent shadow dom in elements section of preferences in devtools.
Now you'll be able to access the shadow dom that is created by the agent (browser engine or browser shortly). In dev tools.
Get to know how to select the element
You can manipulate and experiment faster through the dev-tool. And figuring out properties and default values and what doesn't work. (example at the end)
What is shadow dom?
From Mozilla doc Using_shadow_DOM
An important aspect of web components is encapsulation — being able to keep the markup structure, style, and behavior hidden and separate from other code on the page so that different parts do not clash, and the code can be kept nice and clean. The Shadow DOM API is a key part of this, providing a way to attach a hidden separated DOM to an element. This article covers the basics of using the Shadow DOM.
You can learn more about it. On the link above.
How to figure out how you would refer to those hidden elements
After enabling showing the agent shadow dom. Now you can see those hidden dom elements.
Select the element. And check the Styles corresponding selector. As shown by the red box in the illustration above.
input[type="search" i]::-webkit-search-cancel-button {
}
And that's it.
Can test an example below:
https://codepen.io/mohamedlamineallal/pen/JjZmdPv
See before enabling and after enabling the agent dom shadow.
And for demonstration purposes. You can see, I changed the color using filter, resize the button with padding, and repositioned it with margin-right.
Elements around manipulating the clear button
A great deal with this method is that now you can use the Dev-tool to experiment faster. That includes figuring out what doesn't work at a better speed. Example mask-image with background-color. Or pseudo-element .before.
Things we can figure out:
to position, we have to use margin-right
resize the clear button with padding
To show and hide we got to use opacity
appearance can allow us to hide the default behavior fully. [If we want to disable the default button. We can use appearance: none; (default: appearance: auto;)]
We can see all the default settings
To replace the button, use background-image with URL no-repeat and center. Also, set the height and width
... that at a fast glimpse.
Otherwise, if you want to just change the color, you can with using a filter with (invert, sepia, saturate, hue, brightness, contrast) as in
filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
(code pen)
You can use the calculator here: 1, 2
You can see the details of that method here (SO answer)
or also the svg filters method (SO answer) which I guess it's more ideal (why in the SO answer [link]).
filter: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg">\
<filter id="recolor" color-interpolation-filters="sRGB">\
<feColorMatrix type="matrix" values="\
0 0 0 0 R\
0 0 0 0 G\
0 0 0 0 B\
0 0 0 A 0\
"/>\
</filter>\
</svg>\
#recolor');
read the answer (link).
Reimplement all
And surely if the desired output is more complex. Simply disabling the default behavior and re-implement it fully would be more clean and easy and faster.
Using appearance: none; will hide and disable the default behavior.
input[type="search" i]::-webkit-search-cancel-button {
appearance: none;
}
You can use position: absolute; on a span element to keep the input behavior as outline on focus (can use padding-right for not letting text overflow below the button) and you can also use CSS URL for background-image (SVG icons, you can have utf8 inline encoded SVG where you can change the color, including dynamically if needed) ...
[take keywords, if they make sense check them]
Absolutely: don't use pseudo-element :after. You can't add a js event listener to it. Using a span is cleaner and faster.
Here are some examples:
Using span with absolute position
Using :after pseudo-element and using the event-pointer workaround. (event bubbling make it possible) (you can read the comment in the playground)
The :after example demonstrate. Using a flex-box system. Hidding input outline and border. And re-implementing them. Could have used that in the span example. use outline: none; to disable the default outline.
I advise always to use the dom el (span) way.
I'm not sure is this what you were looking for, but you can style your search bar like this
fiddle
HTML
<div id="input">
<input type="text" id="tb" />
<a id="close" href="#"><img src="http://www.ecoweb.info/sites/default/files/tips-close.png"></a>
</div>
CSS
#tb
{
border:none;
}
#input
{
padding:0px;
border: 1px solid #999;
width:150px;
}
#close
{
float:right;
}
Those super IE troubleshooters out there. Here is the bug. At the bottom of this form: http://xquives.kiaistudio.com/new-form/index.php there are two buttons. They appear perfect in IE10 FF etc., but not in IE 9-8-7. How do I fix this?
buttonbox css:
#buttonbox {
display : block;
margin-top:20px;
margin-bottom : 20px;
overflow:auto;
float:right;
}
button class css:
.button {
background:#5f6156;
background:rgba(0, 0, 0, 0.6);
color:#FFF;
padding: 5px;
float: left;
width: 100px;
border: 1px solid #000;
font-size: 12px;
font-weight: bold;
margin:10px;
display:block;
height:30px;
}
.button:hover {
color:#D3411F;
}
button div html:
<div id="buttonbox">
<input name="SOUMETTRE" type="submit" class="button"/>
<input name="REINITIALISER" type="reset" class="button" />
</div>
--
more info, the button in IE 7-8-9 that are useless are black with no text (or black text) so we dont see the writing... but trigger the post from OK .... just cannot see the text that IS there in FF or IE10
--
Here is a multiple screen capture to SUM it up !
The input tag needs to have a value attribute to tell the browser what text to display – Cody Guldner Mar 22 at 20:34
Although I can't see all of the code because the link is broken, I would assume that you have inserted the text into the input by some sort of pseudo-class, such as :before or :after. I know this, because
You don't have a value attribute on your input
You must be using something that isn't supported in lower browsers
So it probably isn't jQuery, because that has good browser support
So to solve this, all you need to do is add a value to the input. This will assure that the text is always displayed, because it is hard-coded into the HTML.
The buttons will still have their functionality. Its just that nobody will know what they do/
I'm trying to style my form buttons and I'm experiencing a problem in Firefox that I can't get to the bottom of...
I want to style certain <a />s and <input type="submit" />s to look the same (I have a button background image, using a sliding-doors technique to apply a hover effect.)
This all works great, except in Firefox, the input submit text is slightly lower down than it should be. IE and Safari/Chrome work fine.
(source: muonlab.com)
Anyone got any ideas?
Thanks
<div class="buttons">
« Back
<input type="submit" class="button btn-large-green" value="Save changes" />
</div>
.button
{
cursor: pointer;
border: 0;
background-color: #fff;
color: #fff;
font-size: 1.4em;
font-weight: bold;
outline: 0;
font-family: Arial, Verdana, Sans-Serif;
}
a.button
{
display: block;
float: left;
text-align: center;
text-decoration: none;
padding: 5px 0 0 0;
height: 22px;
margin-right: 1em;
}
.btn-small-grey
{
height: 27px;
width: 96px;
background-position: 0 -81px;
background-image: url(/assets/images/buttons/buttons-small.gif);
}
.btn-large-green
{
height: 27px;
width: 175px;
background-position: 0px -54px;
background-image: url(/assets/images/buttons/buttons-large.gif);
}
I found this post because I had resolved this problem a few months ago and when I ran into it again today, I couldn't remember what I'd done. Nice. After poring over my css I finally located the "fix". I can't take credit because I found it on the web somewhere, but hopefully it will be as useful to you as it has been for me:
input::-moz-focus-inner /*Remove button padding in FF*/
{
border: 0;
padding: 0;
}
I hope this helps.
I have same problem every time I need to style form buttons. Sorry, quite busy at the moment so only brief description how I usually fix it.
In FF Text is usually a bit lower, exactly like on the image you attached and so then I simply apply "padding-bottom" on the button itself. It moves the text on the button number of pixels up.
The problem is it also moves text in IE and now IE looks a bit off. To fix that I apply "line-height" to the same button with exactly same value as the height of the button. That makes IE to ignore padding completely and positions the text right in the middle. Below is sample HTML code:
<input type="submit" value="SEARCH" class="search"/>
and CSS:
.search
{
background: transparent url(../images/sprites.gif) no-repeat -310px 0; /* some button image */
height: 29px;
width: 104px;
border: 0;
/* centering text on button */
line-height: 29px; /* FF will ignore this but works for IE. This value should be same as value of the height property above */
padding-bottom: 2px; /* IE will ignore but works for FF */
}
Sorry I didn't applied it directly to your code but I'm a bit busy at the moment, hope you got the idea and it helps though.
ps. just checked in IE8 and all above moves text few pixels up. So it means more (endless?) mocking around with padding top/bottom.. I lost my patience now though and I think I'll be putting all this in separate stylesheet from now on that is until I find some fairly easy and universal solution for all this
Inputs are formatted not following the W3 box model convention in different browsers, you might want to include:
input /*Content follows box model*/
{
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
height:24px;
}
Also include for firefox (which Shelly pointed out):
input::-moz-focus-inner /*Remove button padding in FF*/
{
border: 0;
padding: 0;
}
Otherwise you could use button
I collected all these solutions from various sources, they deserve the credit
I had the same problem and I've solved (only for FF and Safari) by fixing the width but not the height and playing with the values: padding (top and bottom), line-height and if needed setting the vertical-align to middle. However all it's more easy to do if you set all the values (even the font size) in pixel.
EDIT: I think that there isn't a cross-browser solution, because the problem is due to the text rendering of the browsers. To solve completely the problem you could draw a background img with text and apply that image to the link or the button.
Even if with this solution you lose in accessibility.
Alternatively you can use conditional CSS statements to improve the layout for each browser.
You could also consider replacing the the button with a different element altogether. The anchor element works perfectly. Just add a 'submit' function to it's 'onClick' event and you'll be good to go. I think this is a better (and simpler) cross browser solution.
For some reason most modern browsers will stop applying their default input border style to text boxes if you give them a background image. Instead you get that ugly inset style. From what I can tell there's no CSS way to apply the default browser style either.
IE 8 doesn't have this problem. Chrome 2 and Firefox 3.5 do and I assume other browsers as well. From what I've read online IE 7 has the same problem, but that post didn't have a solution.
Here's an example:
<html>
<head>
<style>
.pictureInput {
background-image: url(http://storage.conduit.com/images/searchengines/search_icon.gif);
background-position: 0 1px;
background-repeat: no-repeat;
}
</style>
<body>
<input type="text" class="pictureInput" />
<br />
<br />
<input type="text">
</body>
</html>
In Chrome 2 it looks like this: http://www.screencast.com/users/jadeonly/folders/Snagit/media/d4ee9819-c92a-4bc2-b84e-e3a4ed6843b6
And in Firefox 3.5: http://www.screencast.com/users/jadeonly/folders/Snagit/media/d70dd690-9273-45fb-9893-14b38202ddcc
Update: JS Solution: I'm still hoping to find a pure CSS-on-the-input solution, but here's the workaround I'll use for now. Please note this is pasted right out of my app so isn't a nice, stand alone example like above. I've just included the relevant parts out of my large web app. You should be able to get the idea. The HTML is the input with the "link" class. The large vertical background position is because it's a sprite. Tested in IE6, IE7, IE8, FF2, FF3.5, Opera 9.6, Opera 10, Chrome 2, Safari 4. I need to tweak the background position a couple pixels in some browsers still:
JS:
$$('input.link').each(function(el) {
new Element('span',{'class':'linkIcon'}).setText(' ').injectBefore(el);
if (window.gecko) el.setStyle('padding', '2px 2px 2px 19px');
});
CSS:
input.link { padding-left: 19px; }
span.linkIcon { z-index: 2; width: 19px; height: 19px; position: absolute; background-image: url(img/fields.gif); background-position: 1px -179px; background-repeat: no-repeat; }
Update: CSS Close Enough Solution: Based on the suggestion from kRON here's the CSS to make the inputs match FF and IE in Vista which makes a good choice if you decide to give up on pure defaults and enforce one style. I have modified his slightly and added the "blueish" effects:
CSS:
input[type=text], select, textarea {
border-top: 1px #acaeb4 solid;
border-left: 1px #dde1e7 solid;
border-right: 1px #dde1e7 solid;
border-bottom: 1px #e3e9ef solid;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
padding: 2px;
}
input[type=text]:hover, select:hover, textarea:hover, input[type=text]:focus, select:focus, textarea:focus {
border-top: 1px #5794bf solid;
border-left: 1px #c5daed solid;
border-right: 1px #b7d5ea solid;
border-bottom: 1px #c7e2f1 solid;
}
select { border: 1px; }
When you change border or background style on text inputs They revert back to the very basic rendering mode. Text inputs that are os-style are usually overlays (like flash is) which are rendered on top of the document.
I do not believe there is a pure CSS fix to your problem. Best thing to do - in my opinion - is to pick a style that you like and emulate it with CSS. So that no matter what browser you're in, the inputs will look the same. You can still have hover effects and the like. OS X style glow effects might be tricky, but I'm sure it is doable.
#Alex Morales: Your solution is redundant. border: 0; is ignored in favor of border: 1px solid #abadb3; and results in unnecessary bytes transferred across the wire.
This is the CSS that I use that can provide the default look back:
input, select, textarea {
border-top: 1px #acaeb4 solid;
border-left: 1px #dde1e7 solid;
border-right: 1px #dde1e7 solid;
border-bottom: 2px #f1f4f7 solid;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
You could also apply :active and give the controls that blueish hue once they're selected.
Update!
Ok, here is a workaround that I think is cross-browser compatible. The only issue would be that the default style differs by a few pixels so this might need some tweaking.
<html>
<head>
<style>
.pictureInput {
text-indent: 20px;
}
.input-wrapper {
position:relative;
}
.img-wrapper {
position:absolute;
top:2px;
left:2px;
}
</style>
</head>
<body>
<div class="input-wrapper">
<div class="img-wrapper"><img src="http://storage.conduit.com/images/searchengines/search_icon.gif" alt="asddasd" /></div>
<input type="text" class="pictureInput" />
</div>
<br />
<br />
<input type="text">
</body>
</html>
By using absolute-relative positioning you can make the absolute div (containing the image) act absolute in relation to its parent which all browsers I know about (not counting sub-IE6 versions, IE6+ are fine) can handle. User scaling might be an issue, but this is how it is with workarounds.
On the upside, you don't have to change the styles on your inputs at all (except for text-indent, but you'd do that anyway I hope).
On the downside, it's not the prettiest workaround.
Old!
I know this is not what you want, but you could do something like this to at least make all the input borders consistent.
input {
border-color:#aaa;
border-width:1px;
}
I haven't tried it in all browsers, but since you aren't setting the border-style it might use the native style but with another size (though you can skip that too). I think the key is to just set the border-color to something so that all input fields will use the same border-color and leave the rest up to the browser.
I had a text background image, and this was also annoying me. So I put a relative <div> round the <input> and then added the image absolutely positioned over the <input>.
Then of course I needed a little more Javascript to hide the image if it was clicked, or if the input got the focus by tabbing, or by being clicked around the edges of the image.
With a bit of fiddling this looked pretty good with IE8, Firefox, Chrome, and Opera, but it's a horrible kludge and it would be nice if the browsers fixed it.