CODEWITHSUNDEEP
htmlcssselectcolorstextarea
arun nair
arun nair

Reputation: 3683

Font color not as per styling specified in css for textarea and select boxes

I'm trying to style a webform in my webpage, and the form has couple of textboxes, textarea and a select dropdown. I'm having hard time styling the text area and select dropdown; textboxes are looking as expected.

For the textarea box, i used css like:

textarea{
font-size:0.9em;
color:#6da021;
border:1px solid #6da021;
width:300px; height:50px;
padding-left:10px;
font-family: tahoma, sans-serif;
}

I also tried putting an id in the textarea html and then using the above styling like:

<textarea type="text" rows="5" cols="30" name="details" id="details"></textarea>

In both ways, the border properties were applied successfully. But what did not work in both ways are - color of text inside the textarea box, and also the font looks slightly different from what is seen in the text boxes, which use the same "font-family: tahoma, sans-serif;" css.

Similarly, for the select box styling, although the border properties are coming around properly, and that the font color of the first value - the value that is shown initially, without the user having to click on the dropdown arrow - is also displayed correctly. But when the user clicks on the dropdown arrow, all the values are then shown in the default color (not the color that was specifically used for the css of select).

Is it some kind of a known problem, or am i missing out on some more styling? I see that the issue is seen across browsers (IE/firefox etc..)

Thanks!

Upvotes: 0

Views: 5349

Answers (3)

incalite
incalite

Reputation: 3207

No need for type='text' into the textarea. You're using id='details' and name='details' which is the same thing (2 ids' reference). I suggest using a class named details for the styling and an id='content' to extract the text later, if needed.

<textarea rows="5" cols="30" class="details" id='content' value="initial-Text"></textarea> 

 .details {
     font-family: 'Tahoma', sans-serif;
     font-size: 13px;
     color:#6da021;
     border:1px solid #6da021; 
     width:300px; height:50px;
     padding-left:10px;
    }

Upvotes: 0

Adrian
Adrian

Reputation: 1

Wow I am very late to see this but here is an answer to fix the font size issues

 body{
  font-size:15px;
  font-family: tahoma, sans-serif;
 }

 textarea{
  font-family: inherit;
  font-size: inherit;
 }

Upvotes: 0

Sonal Khunt
Sonal Khunt

Reputation: 1894

your style is right but if u dont get reflect changes than i think ur style is replaced by some othe existing style which has a priorities

if u use firebug than check by inspecting that textarea or if u dont know abt firebug than this is a firefox plugin, install it and check if ur stylesheet is replaced or have some other issue...

if u dont mind than reply me if more help required

Upvotes: 0

Related Questions