CODEWITHSUNDEEP
css
Simon Presto
Simon Presto

Reputation: 167

remove input box border using CSS?

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>

Upvotes: 1

Views: 19033

Answers (2)

Amit Patel
Amit Patel

Reputation: 51

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

Upvotes: 4

koningdavid
koningdavid

Reputation: 8085

You should reset the default styles with 

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

Upvotes: 3

Related Questions