CODEWITHSUNDEEP
htmlcssuser-interface
Vamsee Krishna
Vamsee Krishna

Reputation: 145

How to display two legends of a fieldset in the same line?

I have a fieldset titled "Input". I want to show that the fields in the fieldset are mandatory and hence trying to put a red star before them. The code below gives the star within the lines of fieldset, but puts the header "Input" inside the fieldset on a different line. How can I have them on the same line such that the title looks like "*Input" where the * is in red color?

<fieldset style="border: 2px solid; ">
    <legend style="color:#685645;font-weight:bold;font-size:1.1em">*</legend>
    <legend style="color:#696969;font-weight:bold;font-size:1.1em">Input</legend>
</fieldset>

Upvotes: 0

Views: 3853

Answers (3)

Adam C
Adam C

Reputation: 3911

Another alternative is to use ::before instead, as in:

HTML

<legend class="mandatory">Input</legend>

CSS

.mandatory::before {
  content: "* ";
  color: red;
}

Then you've got a reusable class.

Upvotes: 0

Falguni Panchal
Falguni Panchal

Reputation: 8981

Like this

DEMO

CSS

   fieldset{
    float:left;
    width:300px;
  }
span{
    color:red;
}

HTML

 <fieldset style="border: 2px solid; ">
    <legend style="color:#685645;font-weight:bold;font-size:1.1em"><span>*</span>  Input</legend>

</fieldset>

Upvotes: 1

Vladislav Stanic
Vladislav Stanic

Reputation: 795

Like this jsfiddle.

HTML

<fieldset style="border: 2px solid; ">
<legend>
    <span>*</span>
    Input
</legend>
</fieldset>

CSS

legend {
color:#696969;
font-weight:bold;
font-size:1.1em;

}

span {
color:red;
font-weight:bold;
font-size:1.1em;

}

Upvotes: 1

Related Questions