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..

    How do I get a div to fill the width regardless if the brower window is shrunk?

    How to move nagivation bar to more to the right to fit a logo left of the bar

    How to install preexisting html, css and dreamweaver files into dreamweaver cs6?

    How to set up a correct cascade with label statement

    How to make middle div acting like a fixed positioned header when middle div go to the top place by mouse scrolling

    How to use active and before with CSS?

    How to center social buttons in bootstrap login page?

    Need the background to change when the mouse goes over the selected tab. How?

    How to stop text from vertically centering in a table?

    Navbar on left of page, how to let content resize to match screen size?

    How to get next elements before a specific element using jquery or css

    How to get an image's height and set its parent height to auto?

    How to remove the lines that are being generated beneath my bootstrap navbar

    How can I select an nth element without knowing the element in CSS?

    How to create round plus minus using css?

    PHP How to not cache generated HTML but cache static data like images/js/css

    How to make a html div vertically scrollable after it's height reaches 100% height of the page?

    How to change the background color of a div in HTML/CSS

    How to highlight widget title with CSS?

    How to make a different flip animation using CSS?

    How to change css class according to the name attribute of a parent

    How to center a CSS Hexagon

    HTML/CSS How to prevent highlighting text from spanning entire width of page in google chrome

    how to make vertical progress path using css

    Awkward gap between menu items. How to fix?

    How to use HTMLElement.classList(.toggle)?

    How to increase the duration of :active in css?

    How to make text wrap above and below a div?

    How do I get this div to cover flash control (jw player)?

    How to use HTML/CSS to show images and titles inline?