CODEWITHSUNDEEP
javascripthtmlcssformsrazor
zucchini
zucchini

Reputation: 93

Selective Form Text Color Change

I want to change the color of the ' * ' to red within the form code below so they stand out more. So far I have not found a simple way to do this. , and custom tags don't work within forms.

<form name="requestForm" action="requestSent.cshtml" onsubmit="return validateRequest()" method="post">

<label>Email Address: *</label><br>
    <input type="text" name="customerEmail" /><br><br>

<label>First Name: *</label><br>
    <input type="text" name="firstName" /><br>
<label>Last Name: </label><br>
    <input type="text" name="lastName" /><br><br>

<label>Phone Number: </label><br>
    <input type="text" name="phoneNumber" /><br><br>

<label>Request: *</label><br>
    <textarea name="customerRequest" cols="40" rows="4"></textarea>

<p><input type="submit" value="Submit" /></p>

<br>
* Required Fields

Upvotes: 0

Views: 421

Answers (4)

Hkachhia
Hkachhia

Reputation: 4539

Try this code

<style type="text/css">
.required{color:red;}
</style>
<form name="requestForm" action="requestSent.cshtml" onsubmit="return validateRequest()" method="post">

<label>Email Address: <span class="required">*</span></label><br>
    <input type="text" name="customerEmail" /><br><br>

<label>First Name: <span class="required">*</span></label><br>
    <input type="text" name="firstName" /><br>
<label>Last Name: </label><br>
    <input type="text" name="lastName" /><br><br>

<label>Phone Number: </label><br>
    <input type="text" name="phoneNumber" /><br><br>

<label>Request: <span class="required">*</span></label><br>
    <textarea name="customerRequest" cols="40" rows="4"></textarea>

<p><input type="submit" value="Submit" /></p>

<br>
<span class="required">*</span> Required Fields

Upvotes: 1

vivek salve
vivek salve

Reputation: 991

Just put * into the span tag and apply css to it like

html

<label>Email Address: <span class="redSpan">*</span></label>

css

.redSpan { color:#F00;}

Upvotes: 2

Russell Gutierrez
Russell Gutierrez

Reputation: 1385

Put a span to all of your *s.

<label>Email Address: <span class="red">*</span></label><br>

Then in your CSS:

<style type="text/css">
 .red{
  color: red;
 }
</style>

Upvotes: 3

rlay3
rlay3

Reputation: 10552

Try wrapping the * in a span and then apply a css rule for it

e.g.

.someclass {
    color: red;
}

Upvotes: 1

Related Questions