How to get rid of text form borders in Chrome and Firefox?


Tags: css,forms,border

Problem :

I have created some text forms in my HTML and CSS and they appear to be working just fine in Safari, but in Firefox and Chrome they have what looks to be a 1 to 2px white border around them. Is this a default for that browser styling? How do i get rid of it?

Here is my CSS just for reference....

.forms input[type="text"] {
display:block;
margin: 0 auto;
margin-bottom: 10px;
background-color:#3a3a3a;
color: white;
padding-right:30px;
font-family:inherit;
text-transform:uppercase;
font-size:14px;
height:50px;
width:540px;
}
.shortForms input[type="text"] {
display:inline-block;
margin: 0 auto;
margin-bottom: 10px;
background-color:#3a3a3a;
color: white;
font-family:inherit;
text-transform:uppercase;
font-size:14px;
height:50px;
width:242px; 
}

It is a page with a black background and the text fields are a light shade of grey with white placeholder text.

Thanks in advance for your help!



Solution :

Try adding

fieldset { border: 0px; }

to your CSS.


    CSS Howto..

    CSS: How to position a div in the center with dynamic width

    How to version files in the section?

    how to put image and texts on img html css

    How to add custom CSS/JS to Grails 2.4.x layouts/templates?

    Responsive CSS: Replicating how Facebook's chat panel disappears below a certain browser window width

    How to change CSS of a website depending on whether it is being viewed on mobile or computer? [closed]

    How to insert line breaks between numbers and content in ordered list

    How to center a button WITHOUT a div using CSS

    How to center align ion icon inside button?

    How to style picture gallery to allow portait and landscape pics that are also links

    CSS: How to make the padding-right between li even?

    Ambiguous match, found 2 elements matching css, how to get to the second one?

    How to bottom align a title of variable length

    How do I keep my input fields on one line while centering the DIV that contains them?

    CSS or jQuery on rails / How to “fill frame” with an image?

    Can't show Combobox in table

    Does anyone know how to getr this background effect with css?

    How to freeze frame with css

    how to align horizontally using CSS

    how to number questions using class in CSS

    How to open html document within

    How to have div fill width and height of browser window and not have the image be streched

    How to write css for alt attribute of img tag (word-break: break-all property doesn't work in IE)

    How do I create a full screen click target to work with CSS-only navigation menu with :target?

    how to center and Crop an image to square with CSS

    Javafx CSS How to inherit background color from other css settings

    How to CSS a two column list of items?

    how to keep elements in one row in css

    How to align text sideways using css transform

    how do i prevent respond.js reading my retina display media query?