#1
  1. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2002
    Posts
    607
    Rep Power
    13

    Bold formatting inside a select box?


    Hi,

    I want to have certain elements in a selectbox appear in bold. Is this possible?

    I tried:

    <select name="">
    <option><strong>test</strong>
    </select>

    .. but it didn't work.
  2. #2
  3. Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Apr 2000
    Posts
    1,058
    Rep Power
    22
    I was able to get partially acceptable results in Firefox with:

    Code:
    <select>
      <option style="font-weight:bold">This is bold text</option>
      <option>This is normal text</option>
    </select>
    IE ignored it.

    I've changed the background and font color of a select option with CSS before so I know that's possible (and it worked in IE). maybe you could do that instead.
  4. #3
  5. Contributing (?) User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2004
    Location
    uk
    Posts
    462
    Rep Power
    11
    Originally Posted by wdn2000
    I was able to get partially acceptable results in Firefox with:

    Code:
    <select>
      <option style="font-weight:bold">This is bold text</option>
      <option>This is normal text</option>
    </select>
    IE ignored it.

    I've changed the background and font color of a select option with CSS before so I know that's possible (and it worked in IE). maybe you could do that instead.
    hi wdn2k
    your rite ie isnt the only one to fall over when trying to style this tag, i think the bottom line is, the option tag and the newish kid on the block 'optgroup' have limited styling that can be applied to them, also bearing in mind users of older browsers won't see the effort anyways, ie 5.5 for example doesnt even see optgroup

    of course opening the option tags (group) is the select tag which again has only limited styling choice
    so far i'v only ever been successful with this (example) ...
    Code:
    <select name="month" class="month">
    <option value="january" selected>january
    <option value="february">february
    <option value="march">march
    <option value="april">april
    <option value="may" class="one">may
    <option value="june">june
    <option value="july">july
    <option value="august">august
    <option value="september">september
    <option value="october">october
    <option value="november">november
    <option value="december">december
    </select>
    accompanying css ...
    Code:
    .month {
    background-color:#000000;
    font-family:arial; 
    color:#9999CC;
    font-size:18px;
    font-weight:bold;}
    
    .one {
    font-family:arial; 
    color:#FF0000;
    font-size:18px;
    font-weight:bold;
    background:#0000FF;}
    in each case the, font-size:18px;font-weight:bold; is ignored, but at least you can 'highlight' with background color
    hope that helps... take care... ian
    feel free to email me... the cockney one...
    ian*at*thereddevil.net
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2014
    Posts
    1
    Rep Power
    0
    Originally Posted by ian ocky
    hi wdn2k
    your rite ie isnt the only one to fall over when trying to style this tag, i think the bottom line is, the option tag and the newish kid on the block 'optgroup' have limited styling that can be applied to them, also bearing in mind users of older browsers won't see the effort anyways, ie 5.5 for example doesnt even see optgroup

    of course opening the option tags (group) is the select tag which again has only limited styling choice
    so far i'v only ever been successful with this (example) ...
    Code:
    <select name="month" class="month">
    <option value="january" selected>january
    <option value="february">february
    <option value="march">march
    <option value="april">april
    <option value="may" class="one">may
    <option value="june">june
    <option value="july">july
    <option value="august">august
    <option value="september">september
    <option value="october">october
    <option value="november">november
    <option value="december">december
    </select>
    accompanying css ...
    Code:
    .month {
    background-color:#000000;
    font-family:arial; 
    color:#9999CC;
    font-size:18px;
    font-weight:bold;}
    
    .one {
    font-family:arial; 
    color:#FF0000;
    font-size:18px;
    font-weight:bold;
    background:#0000FF;}
    in each case the, font-size:18px;font-weight:bold; is ignored, but at least you can 'highlight' with background color
    HI,
    I am making course registration system and in options I want to make first part bold and second italic how can I do that?


    <option>NC/NA-L BS(CS)-V,BE(EG)-IV</option>

    BOLD : NC/NA-L
    ITALIC: BS(CS)-V,BE(EG)-IV
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2014
    Posts
    8
    Rep Power
    0
    As established by other people, and I have tried with <b> and other tags, <option> does not take tags within it.

    What you can do, since you cannot use <span> inside an <option> tag,
    You can use the index number to extract the text via
    document.getElementById(selectid).options[x].text where x is the relevant index, as a variable.

    Then what you do is use the " (" to split the variable into the time, and remove the last character as well which removes the ")"

    Sample:

    <script type="text/javascript">
    function extractSelectText()
    {
    var text = document.getElementById("main").options[1].text
    /*
    var tlength = text.length
    var splitno = tlength - 1
    var text2 = text.slice(0, splitno)
    var textArray = text2.split(" )")
    var time = textArray[0]
    var hours = textArray[1]
    }
    </script>
    Changing it is much simpler:

    <script type="text/javascript">
    function changeSelectText()
    {
    /* add your code here to determine the value for the time (use variable time) */

    /* add your code here to determine the value for the hour (use variable hours) */
    var textvalue = time + " (" + hours + ")"
    document.getElementById("main").options[1].text
    }
    </script>
    If you use a for function you can change each value of the select replacing 1 with 2, 3 and so on, and put a set interval function to constantly update it.

IMN logo majestic logo threadwatch logo seochat tools logo