Author Topic: Changing background color of <select> boxes (Read 1682 times)

blue sam3 · « **on:** July 18, 2009, 03:21:44 pm »

Forum Url: http://testbluesam3.smfforfree.com
I am working on a skin for another forum (currently being tested on the above) that involves changing the background color of the <select> boxes, I have already succeeded in changing the font colour, although I don't know how, and this makes it unreadable until I can change the background colour. A search with firebug has revealed nothing, and I am stumped. Any ideas?

CSS:

Code: [Select]

a:link {
color:#FFFFFF;
font-weight:bold;
text-decoration:none;
background-image:undefined;
}
a:visited {
color:#FFFFFF;
font-weight:bold;
text-decoration:none;
}
a:hover {
color:#FFFFFF;
font-weight:bold;
text-decoration:underline;
}
.nav, .nav:link, .nav:visited {
color:#FFFFFF;
font-weight:bold;
text-decoration:none;
}
a.nav:hover {
color:#FF0000;
text-decoration:underline;
}
table {
empty-cells:show;
}
body, td, th, tr {
color:#FFFFFF;
font-family:verdana,sans-serif;
font-size:small;
}
body {
background-color:#000000;
margin:0;
padding:12px 30px 4px;
}
input, textarea, button {
background-color:#000000;
color:#FFFFFF;
font-family:verdana,sans-serif;
}
input, button {
font-size:90%;
}
textarea {
color:#FFFFFF;
font-family:verdana,sans-serif;
font-size:100%;
}
input.check {
}
select {
color:#FFFFFF;
font-family:verdana,sans-serif;
font-size:90%;
font-weight:normal;
}
hr, .hrcolor {
background-color:#222222;
border:0 none;
color:#AAAAAA;
height:1px;
}
a img {
border:0 none;
}
.quote {
background-color:#111111;
border:1px solid #000000;
color:#FFFFFF;
font-size:x-small;
line-height:1.4em;
margin:1px;
padding:1px;
}
.code {
background-color:#222222;
border:1px solid #000000;
color:#FFFFFF;
font-family:"courier new","times new roman",monospace;
font-size:x-small;
line-height:1.3em;
margin:1px auto;
max-height:24em;
overflow:auto;
padding:1px;
white-space:nowrap;
width:99%;
}
.quoteheader, .codeheader {
color:#EEEEEE;
font-size:x-small;
font-style:normal;
font-weight:bold;
line-height:1.2em;
text-decoration:none;
}
.help {
cursor:help;
}
.meaction {
color:#FF0000;
}
.editor {
width:96%;
}
.highlight {
background-color:#FFFF00;
color:black;
font-weight:bold;
}
.windowbg {
background-color:#111122;
color:#EEEEFF;
}
.windowbg2 {
background-color:#222222;
color:#EEFFEE;
}
.windowbg3 {
background-color:#222233;
color:#EEFFFF;
}
.calendar_today {
background-color:#333333;
}
.titlebg, tr.titlebg th, tr.titlebg td, .titlebg2, tr.titlebg2 th, tr.titlebg2 td {
border-bottom:1px solid #9BAEBF;
border-top:1px solid #FFFFFF;
color:#EEFFEE;
font-style:normal;
padding-left:10px;
padding-right:10px;
}
.titlebg, .titlebg a:link, .titlebg a:visited {
color:#EEFFEE;
font-style:normal;
font-weight:bold;
}
.titlebg a:hover {
color:#EEEEFF;
}
.titlebg2 a:link, .titlebg2 a:visited {
color:black;
font-style:normal;
text-decoration:underline;
}
.titlebg2 a:hover {
text-decoration:underline;
}
.catbg, tr.catbg td, .catbg3, tr.catbg3 td {
color:#FFFFFF;
padding-left:10px;
padding-right:10px;
}
.catbg2, tr.catbg2 td {
color:#0F0F0F;
padding-left:10px;
padding-right:10px;
}
.catbg, .catbg2, .catbg3 {
border-bottom:1px solid #375576;
}
.catbg, .catbg2 {
font-weight:bold;
}
.catbg3, tr.catbg3 td, .catbg3 a:link, .catbg3 a:visited {
color:white;
font-size:95%;
text-decoration:none;
}
.catbg a:link, .catbg a:visited, .catbg2 a:link, .catbg2 a:visited {
color:white;
text-decoration:none;
}
.catbg a:hover, .catbg2 a:hover, .catbg3 a:hover {
color:#888888;
}
.bordercolor {
background-color:#222222;
padding:0;
}
.tborder {
background-color:#112211;
border:1px solid #EEEEEE;
padding:1px;
}
.smalltext {
font-family:verdana,sans-serif;
font-size:x-small;
}
.middletext {
font-size:90%;
}
.normaltext {
font-size:small;
}
.largetext {
font-size:large;
}
.post, .personalmessage {
line-height:1.3em;
overflow:auto;
width:100%;
}
.signature {
line-height:1.3em;
overflow:auto;
padding-bottom:3px;
width:100%;
}
.error {
color:red;
}
.maintab_first, .maintab_back, .maintab_last, .maintab_active_first, .maintab_active_back, .maintab_active_last {
color:white;
text-transform:uppercase;
vertical-align:top;
}
.maintab_back, .maintab_active_back {
color:white;
font-family:tahoma,sans-serif;
font-size:9px;
padding:2px 6px 6px;
text-decoration:none;
vertical-align:top;
}
.maintab_first {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(images/maintab_first.gif) no-repeat scroll left bottom;
width:10px;
}
.maintab_back {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(images/maintab_back.gif) repeat-x scroll left bottom;
}
.maintab_last {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(images/maintab_last.gif) no-repeat scroll left bottom;
width:8px;
}
.maintab_active_first {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(default/images/maintab_active_first.gif) no-repeat scroll left bottom;
width:6px;
}
.maintab_active_back {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(default/images/maintab_active_back.gif) repeat-x scroll left bottom;
}
.maintab_active_last {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(default/images/maintab_active_last.gif) no-repeat scroll left bottom;
width:8px;
}
.maintab_back a:link, .maintab_back a:visited, .maintab_active_back a:link, .maintab_active_back a:visited {
color:white;
text-decoration:none;
}
.maintab_back a:hover, .maintab_active_back a:hover {
color:#FF0000;
text-decoration:none;
}
.mirrortab_first, .mirrortab_back, .mirrortab_last, .mirrortab_active_first, .mirrortab_active_back, .mirrortab_active_last {
color:white;
text-transform:uppercase;
vertical-align:top;
}
.mirrortab_back, .mirrortab_active_back {
color:white;
font-family:tahoma,sans-serif;
font-size:9px;
padding:6px 6px 2px;
text-decoration:none;
vertical-align:bottom;
}
.mirrortab_first {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(images/mirrortab_first.gif) no-repeat scroll 0 0;
width:10px;
}
.mirrortab_back {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(images/mirrortab_back.gif) repeat-x scroll 0 0;
}
.mirrortab_last {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(images/mirrortab_last.gif) no-repeat scroll 0 0;
width:6px;
}
.mirrortab_active_first {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(images/mirrortab_active_first.gif) no-repeat scroll 0 0;
width:6px;
}
.mirrortab_active_back {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(images/mirrortab_active_back.gif) repeat-x scroll 0 0;
}
.mirrortab_active_last {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(images/mirrortab_active_last.gif) no-repeat scroll 0 0;
width:8px;
}
.mirrortab_back a:link, .mirrortab_back a:visited, .mirrortab_active_back a:link, .mirrortab_active_back a:visited {
color:white;
text-decoration:none;
}
.mirrortab_back a:hover, .mirrortab_active_back a:hover {
color:#E0E0FF;
text-decoration:none;
}
#ajax_in_progress {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#444444 none repeat scroll 0 0;
color:white;
font-size:18pt;
font-weight:bold;
left:0;
padding:3px;
position:fixed;
text-align:center;
top:0;
width:100%;
}
input {
background-color:#000000;
color:#ffffff;
}
form {
background-color:#000000;
color:#ffffff;
}

simply sibyl · « **Reply #1 on:** July 18, 2009, 04:03:35 pm »

Looking at your css you have them set to a black background and white font so it should already be fine for you

input, textarea, button {
background-color:#000000;
color:#FFFFFF;
font-family:verdana,sans-serif;
}

Check this thread:
Stylesheet Making Tips/Helpful Links
There is a post in it that details the areas of the css.. that shoudl help you.

I am unable to view your site at the moment to see how it appears now (an issue on my end here)

blue sam3 · « **Reply #2 on:** July 19, 2009, 09:22:47 am »

It doesn't work though, as you can see on the test forum (look at the login time box).

simply sibyl · « **Reply #3 on:** July 19, 2009, 10:43:58 am »

Quote from: blue sam3 on July 19, 2009, 09:22:47 am

It doesn't work though, as you can see on the test forum (look at the login time box).

They are black. When you type in them the font is white and easily readable. The dropdown box (where it says "forever, etc" is readable too) So Im not seeing what the problem is?

blue sam3 · « **Reply #4 on:** July 19, 2009, 12:46:43 pm »

It wasn't, I've just found the problem, there were extra input, textarea and button sections.

Subject / Started by	Replies	Last post
Changing Color Of Forum Title And Quote Background Started by acdouglas Stylesheet Requests and Support	7 Replies 3043 Views	August 12, 2006, 09:23:51 pm by Crasy
Skin Color Changing/Programming a game/games Started by Fira General Support	3 Replies 1466 Views	August 15, 2006, 09:40:05 pm by Crasy
changing color/theme/skin Started by coffeebean Stylesheet Requests and Support	6 Replies 1933 Views	January 16, 2007, 07:33:57 pm by coffeebean
Changing Category color/image in a theme Started by RyanA Stylesheet Requests and Support	9 Replies 2358 Views	March 06, 2007, 02:51:42 pm by Crasy
Changing sizes of boxes within boards... Started by Cheley General Support	13 Replies 1986 Views	February 27, 2009, 08:23:09 pm by simply sibyl

SMF For Free Support Forum

News:

Author Topic: Changing background color of <select> boxes (Read 1682 times)

blue sam3

Changing background color of <select> boxes

simply sibyl

Re: Changing background color of <select> boxes

blue sam3

Re: Changing background color of <select> boxes

simply sibyl

Re: Changing background color of <select> boxes

blue sam3

Re: Changing background color of <select> boxes

Related Topics