#60 Page styles specify input text color, but not bg color

closed
nobody
None
5
2012-08-06
2012-07-14
No

One of the site's stylesheets specifies a text color of black but does not set a background color. As a result, users browsing the site with system/browser color schemes with a dark background color may be unable to read the black text on that dark background. The text color specification can be removed or a light-colored background can be specified to remedy the problem.

The problematic stylesheet:
https://isc.sans.edu/css/design/styles.css

Current input specification:
input {
/* background:url(/images/design/custom/generic-button-bg.png);*/
height:25px;
border:0;
webkit-border-radius:5px; /*For Chrome/Safari*/
-moz-border-radius:5px; /*For Firefox*/
border-radius:5px;
color:#000;
border:1px solid #76899f;
}

Additional problems with this particular snippet include the redundant border specification ("border:0;" should be removed) and an incorrect border radius specification for WebKit. I recommend the following:
input {
-webkit-border-radius:6px; /*For Chrome/Safari*/
-moz-border-radius:5px; /*For Firefox*/
border-radius:5px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color:#000;
background-color:#f5f5f5;
border:1px solid #76899f;
}

You may also want to add matching color specifications for button, textarea and select elements.

Discussion

  • Adam Swanger

    Adam Swanger - 2012-08-06

    Thanks for the tips! I removed the extraneous border assignment and added a background color. Will continue to tweak as time allows.

     
  • Adam Swanger

    Adam Swanger - 2012-08-06
    • status: open --> closed
     

Log in to post a comment.

Get latest updates about Open Source Projects, Conferences and News.

Sign up for the SourceForge newsletter:

JavaScript is required for this form.





No, thanks