How to change fieldset's legend default color

i’m using in my stylesheet:


[LEFT]fieldset {
font-family: verdana, arial, helvetica, sans-serif; 
color: #999
}[/LEFT]

but the blue insists in showing up…

can someone tell me please what am i doing wrong?

thank you

Form controls aren’t the easiest things to style but it is probably taking the value from your background colour. From that CSS it would style the LEGEND text grey. We’d need to see a sample page or something to get a better idea of what else is effecting things.

i can post the .css and the .jsp code, in case its helpful…

The output as seen/rendered by the browser and CSS would help.

ok

You have a syntax error here:


fieldset {
    position: relative;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 120.01%;
[B] color: #999: [/B]  
 width: 100px;
    margin:0 auto
}


It should be:


fieldset {
    position: relative;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 120.01%;
 [B]color: #999;[/B]  
 width: 100px;
    margin:0 auto
}


i fixed the typo but the blue color persists…

Sorry, I actually meant the markup or a link to the page not really an image. So that I could see if the HTML was wrong via a browser or if the CSS had been inherited.

ok
i changed both extensions so that i could upload :slight_smile:
(css file should be renamed to avulsas.css and put inside a folder called css)

Hi,

In IE you need to style the legend because it has a default color applied and will not inherit from the parent fieldset.


legend{color:#999}

thanks;
BTW how do i style the legend with both color and align?
i’m writing this:

 
<legend style = "color: #999; align: right">html</legend>

but only color works… :frowning:

Hi,

Legend is one of a number of form elements that only allow limited styling and in most cases you are stuck with the browsers defaults.

In safari and chrome you could do this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#form1 {
    width:500px;
    margin:auto
}
#form1 fieldset {
    text-align:right;
}
#form1 div {
    text-align:left;
}
</style>
</head>
<body>
<form id="form1" method="post" action="">
    <fieldset>
    <legend><span>Testing</span></legend>
    <div>
        <label for="test">test:</label>
        <input type="text" name="test" id="test" />
    </div>
    </fieldset>
</form>
</body>
</html>


For IE and Firefox you could use a margin-left on the legend to move it into position but unfortunately that breaks chrome and safari.

A nasty hack would be to change the direction of the text on the fieldset and then reset it immediately on an inner div.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#form1 {
    width:500px;
    margin:auto
}
#form1 fieldset {
    direction:rtl
}
#form1 div {
    direction:ltr
}
</style>
</head>
<body>
<form id="form1" method="post" action="">
    <fieldset>
    <legend><span>Testing</span></legend>
    <div>
        <label for="test">test:</label>
        <input type="text" name="test" id="test" />
    </div>
    </fieldset>
</form>
</body>
</html>

That seems to work but is a nasty hack as direction is supposed to be used for languages that run in different directions and to be honest I don’t know what the implications might be down the line.

You can read more about styling a legend here.

BTW there is no css property align:right I think you meant text-align:right.

thanks a lot for your help
using deprecated code i can right align the fieldset caption like this:


[LEFT][SIZE=2][COLOR=#000080][SIZE=2][COLOR=#000080]<fieldset>[/COLOR][/SIZE][/COLOR][/SIZE][/LEFT]
[SIZE=2][COLOR=#000080][SIZE=2][COLOR=#000080]<legend [/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#000080][SIZE=2][COLOR=#000080]style [/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#000080][SIZE=2][COLOR=#000080]= [/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#008000][SIZE=2][COLOR=#008000]"color: #999" [/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#000080][SIZE=2][COLOR=#000080]align = [/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#008000][SIZE=2][COLOR=#008000]"right"[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#000080][SIZE=2][COLOR=#000080]>[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]html[/SIZE][SIZE=2][COLOR=#000080][SIZE=2][COLOR=#000080]</legend>[/COLOR][/SIZE]
[/COLOR][/SIZE]

Yes that will work also but won’t validate in a strict doctype. However it does do what you want :slight_smile:

this works fine with i.e. - with others i dont know:
legend {
position:absolute;
top:-.5em;
left:3.5em;
color:#666;
}

HI,

Yes that will work also but I originally discounted that method as you have to rub out the fieldset border in Firefox where it cuts all the way through the text. That means that you can’t use it on backgrounds with gradients or different colours.

If you don’t mind that limitation then it should be a good method but you need to control the padding and margin to get consistency.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
fieldset {
    position:relative;
    width:500px;
    margin:0 auto;
    padding:0;
}
legend {
    position:absolute;
    top:-.7em;
    right:2em;
    color:#666;
    background:#fff;
    padding:0 10px;
    margin:0;
}
</style>
</head>
<body>
<p>test</p>
<fieldset>
<legend>testing</legend>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</fieldset>
</body>
</html>