how can I give a required field a colour? and...

sh

shd 23 Oct, 2007

Hi,

I validate my form but is it possible to give a required field a colour so it has the attention?
Now I must search for the field. And can I give de required text also an other colour and a bigger font? I use css for my whole template.
I translated the required text already in Dutch.

And, in Explorer 6, I have fields side by side, when the field is required and the field is at the right of the required field , the right field would be placed under the required field.
When I enter the required text the right field is coming back to his place.
Firefox is doing it on the correct way.

Pfft it is a mess when the form validates in Explorer 6.

I hope somebody could help me.

Groetjes, greetings,
Stephanie

bo

bouton 23 Oct, 2007

to get the red boxes visible in the image http://www.chronoengine.com/index.php?option=com_fireboard&Itemid=37&func=view&id=1581&catid=5#1581
I use the following css


/* END Tab in Content Module CSS */
.form-row {
	clear: both;
	padding: 0.5em;
}
.field-label {
	width:10em;
	float:left;
	margin-right:.5em;
	text-align:left;
	font-weight: bold;
}
.field-widget {
	padding: 3px;
}
/** turn off the border on radio and checkboxes in IE               **/
/** necessary because IE defines the border as a box around the radio **/
/** or the checkbox, not the actual button                            **/
input.radio.required {
	padding: 3px;
	border:none; 
}
/** turn the border back on for radio and checkboxes for Mozilla based browser **/
/** necessary because these define the border as the actual radio or checkbox **/
/** IE 5+ ignores this CSS 2 definition                     **/
input.required, textarea.required, input[type="radio"].required, input[type="checkbox"].required {
	padding: 3px;
	border:Ã‚Â«Ã‚Â»solid 1px red !important;
}
input.validation-failed, textarea.validation-failed {
	border: 1px solid #FF3300;
	color : #FF3300;
}
input.validation-passed, textarea.validation-passed {
	border: 1px solid #00CC00;
	color : #000;
}
.validation-advice {
	margin: 5px 0;
	padding: 5px;
	background-color: #FF3300;
	color : #FFF;
	font-weight: bold;
}
.custom-advice {
	margin: 5px 0;
	padding: 5px;
	background-color: #C8AA00;
	color : #FFF;
	font-weight: bold;
}

sh

shd 24 Oct, 2007

Tnx for your help. It is working!!

bo

bouton 24 Oct, 2007

Always nice when it works. - Cool. Enjoy.

Forums

how can I give a required field a colour? and...