Style in inline HTML not working?

Question

Below is the code for selected option in HTML which is working:

<!DOCTYPE html>
<html>
<head>
<style>
.Orange{color:Orange;}
.Red{color:Red;}
.Green{color:Green;}
</style>
</head>
<body>

<SELECT id='select' NAME='select' class="form-select" OnChange='this.className=this.options[this.selectedIndex].className' style='font-family : Arial; font-size : 10px; '>
<OPTION CLASS = 'null' VALUE='' TITLE='' style = 'color:null' SELECTED>
<OPTION CLASS = 'Red' VALUE='108R675' TITLE='Red'  >Red
<OPTION CLASS = 'Green' VALUE='108R723' TITLE='Green' >Green
<OPTION CLASS = 'Green' VALUE='108R725' TITLE='Green' >Green
<OPTION CLASS = 'Orange' VALUE='108R726' TITLE='Orange' >Orange
<OPTION CLASS = 'Green' VALUE='109R642' TITLE='Green' >Green
<OPTION CLASS = 'Orange' VALUE='109R754' TITLE='Orange' >Orange </SELECT>

</body>
</html>

But I want to use the style within Selected tags along with font size and family. But if I do that the color style is not working. I am trying like this;

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<SELECT id='select' NAME='select' class="form-select" OnChange='this.className=this.options[this.selectedIndex].className' style='font-family : Arial; font-size : 10px; .Orange{color:Orange;}.Red{color:Red;}.Green{color:Green;}'>
<OPTION CLASS = 'null' VALUE='' TITLE='' style = 'color:null' SELECTED>
<OPTION CLASS = 'Red' VALUE='108R675' TITLE='Red'  >Red
<OPTION CLASS = 'Green' VALUE='108R723' TITLE='Green' >Green
<OPTION CLASS = 'Green' VALUE='108R725' TITLE='Green' >Green
<OPTION CLASS = 'Orange' VALUE='108R726' TITLE='Orange' >Orange
<OPTION CLASS = 'Green' VALUE='109R642' TITLE='Green' >Green
<OPTION CLASS = 'Orange' VALUE='109R754' TITLE='Orange' >Orange </SELECT>

</body>
</html>

Any idea?

@Hassan Imam: That's not going to make any difference. This is not XHTML. — BoltClock, Oct 06 '17 at 12:50
@BoltClock it's not a solution to the issue OP is facing, it is just odd to see the tag and attribute name in upper case. I have removed the comment as it was misleading. — Hassan Imam, Oct 06 '17 at 12:51
@Hassan Imam: That's why I'm telling you it's normal. A little archaic, but normal. — BoltClock, Oct 06 '17 at 12:53

Michael Benjamin · Answer 1 · 2017-10-06T12:59:35.713

The style attribute is being used incorrectly.

This is what you have:

<SELECT id='select' 
        NAME='select' 
        class="form-select" 
        OnChange='this.className=this.options[this.selectedIndex].className'
        style='font-family : Arial; font-size : 10px; 
              .Orange{color:Orange;}.Red{color:Red;}.Green{color:Green;}'>

You can only insert styles in the style attribute. You're including selectors (the classes). That's invalid.

3. Syntax and Parsing

The value of the style attribute must match the syntax of the contents of a CSS declaration block (excluding the delimiting braces).

Use the head section of the document or an external stylesheet to define selectors.

<head>

<style>

  .Orange{color:Orange;}
  .Red{color:Red;}
  .Green{color:Green;}

</style>

</head>

So is there any other to use that within style? – Harsh Oct 06 '17 at 13:13 — Harsh, Oct 06 '17 at 13:13

score 2 · Answer 2 · answered Oct 06 '17 at 12:49

2

Keep the styles for the colors in the <head><style> tag. You can not use the style attribute of an element to define CSS classes. Font-family etc. will be inherited from the parent element, so the <option> will inherit the font from the <select>.

answered Oct 06 '17 at 12:49

Georg Patscheider

9,357
1
26
36

So is there any other to use that within style? – Harsh Oct 06 '17 at 13:13

Gohel Dhaval · Answer 3 · 2017-10-09T08:01:10.757

First Of all Style attribute inline html tag are not used proper

if u want to use class then use other type of CSS like internal, and external

you do not use class inside inline style attribute

<SELECT id='select' 
        NAME='select' 
        class="form-select" 
        OnChange='this.className=this.options[this.selectedIndex].className'
        style='font-family : Arial; font-size : 10px; 
              .Orange{color:Orange;}.Red{color:Red;}.Green{color:Green;}'>

BUT YOU CAN USE IT BELOW METHOD

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
      .Orange{color:Orange;}
      .Red{color:Red;}
      .Green{color:Green;}
</style>
</head>
<body>

<SELECT id='select' 
    NAME='select' 
    class="form-select Orange Red Green" 
    OnChange='this.className=this.options[this.selectedIndex].className'
    style='font-family : Arial; font-size : 10px;'>

</body>
</html>

score 1 · Answer 4 · answered Oct 06 '17 at 12:49

In style tag you cannot include classes:

style='font-family : Arial; font-size : 10px; .Orange{color:Orange;}.Red{color:Red;}.Green{color:Green;}'

That is the reason it is not working.

<!DOCTYPE html>
<html>
<head>
<style>
.Orange{color:Orange;}.Red{color:Red;}.Green{color:Green;}
</style>
</head>
<body>

<SELECT id='select' NAME='select' class="form-select" OnChange='this.className=this.options[this.selectedIndex].className' style='font-family : Arial; font-size : 10px;'>
<OPTION CLASS = 'null' VALUE='' TITLE='' style = 'color:null' SELECTED>
<OPTION CLASS = 'Red' VALUE='108R675' TITLE='Red'  >Red
<OPTION CLASS = 'Green' VALUE='108R723' TITLE='Green' >Green
<OPTION CLASS = 'Green' VALUE='108R725' TITLE='Green' >Green
<OPTION CLASS = 'Orange' VALUE='108R726' TITLE='Orange' >Orange
<OPTION CLASS = 'Green' VALUE='109R642' TITLE='Green' >Green
<OPTION CLASS = 'Orange' VALUE='109R754' TITLE='Orange' >Orange </SELECT>

</body>
</html>

Try adding as shown in snippet.

So is there any other to use that within style? – Harsh Oct 06 '17 at 13:13 — Harsh, Oct 06 '17 at 13:13

Style in inline HTML not working?

4 Answers4