How to alter checkbox look & feel

AbinSur · **How to alter checkbox look & feel -** 10-29-2004, 09:02 AM

Being relatively un-educated in the way of styles and "fancy" html, I'm wondering how the authors of various themes place colors and boxes around the checkbox and radio input controls? I've found several very nice themes I'd like to use, but would like to get rid of the black box around these controls.

Thanks!

Gabe

mikem · 10-29-2004, 09:42 AM

Most of that info is controlled by the theme's css style sheet.

Code:

The Form Elements are is what you need to look at.

/* Form elements */
input,textarea, select {
	color : #000000;
	font: normal 11px Verdana, Arial, Helvetica, sans-serif;
	border-color : #000000;
}

/* The text input fields background colour */
input.post, textarea.post, select {
	background-color : #FFFFFF;
}

input { text-indent : 2px; }

/* The buttons used for bbCode styling in message post */
input.button {
	background-color : #EFEFEF;
	color : #000000;
	font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif;
}

/* The main submit button option */
input.mainoption {
	background-color : #FAFAFA;
	font-weight : bold;
}

/* None-bold submit button */
input.liteoption {
	background-color : #FAFAFA;
	font-weight : normal;
}

AbinSur · 10-29-2004, 09:53 AM

Code:

/* Form elements */ 
input,textarea,select{
border-color:#000000;
color:#000000;
border:1px solid;
font:normal 11px Verdana,Arial,Helvetica,sans-serif}
}

This is what's in the theme I'm trying to change... I'd like to keep the text and submit elements the same as they are now, but change the checkbox and radios to "normal." Is this possible?

Gabe

mikem · 10-29-2004, 09:58 AM

In the one you have there, I think you may want to move the ,select option to another Form element.

Actually you might want to split it all up like this

Code:

/* Form elements */
input{
border-color:#000000;
color:#000000;
border:1px solid;
font:normal 11px Verdana,Arial,Helvetica,sans-serif}
}

/* Form elements */
textarea{
border-color:#000000;
color:#000000;
border:1px solid;
font:normal 11px Verdana,Arial,Helvetica,sans-serif}
}

/* Form elements */
select{
border-color:#000000;
color:#000000;
border:1px solid;
font:normal 11px Verdana,Arial,Helvetica,sans-serif}
}

You are going to have to play with those settings to aquire your desired results.