remove input box border using CSS?

Question

I have an input text field that I have removed its borders and changed its background using CSS.

This works fine in Firefox but the problem that I have is in the Google Chrome!

Good----> This is how it should be and is in Firefox:

http://tinypic.com/view.php?pic=n2g0g0&s=5

Bad-----> This is how it is showing in Google Chrome with the white border around the input field:

http://tinypic.com/view.php?pic=uc1me&s=5

This is my CSS CODE:

#myInput{

color:#FFF; 
font-family:Tahoma, Geneva, sans-serif; 
text-align:center; 
font-size:16px; 
background-color:#1abc9c; 
outline:none; 
border:none; 
border-style: none; 
font-weight:bold;
}

although the CSS above is inline CSS.

The question is how can I remove that white border around the input field so it looks like the one in firefox?

Thanks

edit:

Here is the code for the input inside the div tags. This is exactly what I have in the HTML page:

<div id="yourCurrentTime"><FORM NAME="wcForm" >
  <input style=" color:#FFF; font-family:Tahoma, Geneva, sans-serif; text-align:center; font-size:16px; background-color:#1abc9c; outline:none; border:none; border-style: none; font-weight:bold -webkit-appearance:none; -moz-appearance:none; appearance:none;"  name="mClock" class="mClock" id="mClock" size="30" />
</FORM></div>

What is the HTML exactly? Is it just an `input`? Do you wrap the `input` in a `div`? — Dom, Aug 13 '13 at 15:27
I can't reproduce this based on the code you're provided. Please provide a complete example. — j08691, Aug 13 '13 at 15:28
Is it due to the textbox having focus? If so, check out http://stackoverflow.com/questions/3397113/how-to-remove-border-outline-around-text-input-boxes-chrome — Mike, Aug 13 '13 at 15:28
@Mike he already has `outline:none;` in his CSS, that was initially my thought too — Dom, Aug 13 '13 at 15:29
That is very strange then. because i have nothing else in my HTML page other than a javascript and there is nothing to do with border colour in my javascript code!! — Simon Presto, Aug 13 '13 at 15:37
@SimonPresto The `css` in your post is `#myInput` your `html` is `#mClock`. Maybe that's your problem? But there is `inline-css` so I could be wrong. — Jo E., Aug 13 '13 at 15:39
@joespina, no I only changed it to #myInput for the purpose of this question! it won't make any difference anyway because it is an inline CSS. — Simon Presto, Aug 13 '13 at 15:41
yeah I said it has inline-css and I did say I could be wrong. Anyway it doesn't show a white border on the fiddle I posted. I'm using `chrome v28` AND I just checked it on `ff` `opera` `ie10` and `safari` all show no signs of the white border. — Jo E., Aug 13 '13 at 15:47

score 4 · Answer 1 · answered Aug 21 '16 at 17:15

4

    <style>
        input{
            border: 0px solid
         }
     </style

answered Aug 21 '16 at 17:15

Amit Patel

51
3

May you add some comment to explain why this should work ? – JazZ Aug 21 '16 at 17:44
– Amit Patel Aug 22 '16 at 04:56

score 3 · Answer 2 · answered Aug 13 '13 at 15:25

3

You should reset the default styles with

#myInput{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
}

answered Aug 13 '13 at 15:25

koningdavid

7,903
7
35
46

@SimonPresto It must be something in your code else then, I can't reproduce it with the HTML you provided – koningdavid Aug 13 '13 at 15:32

remove input box border using CSS?

2 Answers2