text-transform: Capitalize don,t work for

Question

I want make each first letter of select box capital but my code is work for only lowercase and uppercase. How to make capital starting letter of each word? Does capitalize work for crome browser or my code is wrong?

I try for more time but it work for only uppercase and lowercase not for capitalize

This my PHP code:

<select  name="hotel_name1" id="hotel_name1" class="select-drop">
    <option value disabled selected style="color:gray">Select Hotel</option>
    <?php
    while ($row=mysql_fetch_array($result)) {
    ?>
    <option value="<?php echo $row["postid"]; ?>"><?php echo $row["hotel_name"]; ?></option>
    <?php
    }
    ?>
</select>

CSS:

select {
  height: 1.4em;             /* show only one option when not focused */
}

option  {
  text-transform: lowercase; /* change to lowercase */
  padding-right: 2em;        /* the select's width is based on width of its longest non-transformed ... */
                             /* option.  padding ensures that option is completely visible */
  display: none;             /* hide all options by default (see below) */
}

option:first-letter {
  text-transform: uppercase; /* change first letter to uppercase */
}

option:checked, select:focus option { 
  display: block;            /* show selected option, or show all options when the select is focused */
}

What seems to be the problem -> https://jsfiddle.net/yLehr95z/? — Salman A, Nov 28 '18 at 13:42
No one should be writing code with `mysql_` in it anymore. Please switch to `mysqli_` functions. It will be much simpler to implement your desired adjustment via php versus css. — mickmackusa, Dec 03 '18 at 12:23

Shim-Sao · Accepted Answer · 2018-11-28T13:04:42.570

1

You can directly output formatted words in PHP with :

string ucwords ( string $str [, string $delimiters = " \t\r\n\f\v" ] )

Documentation here : http://php.net/manual/fr/function.ucwords.php

string ucfirst(string $str);

Documentation here : http://php.net/manual/en/function.ucfirst.php

Response of similar a question to doing this with CSS :

How to Capitalize first letter only using CSS in each case

edited Nov 28 '18 at 13:04

answered Nov 28 '18 at 12:59

Shim-Sao

2,026
2
18
23

Sonal Borkar · Answer 2 · 2018-11-28T13:18:46.907

0

Edited: Seema => use select and remove all option styles

Try text-transform: capitalize, and remove display:none

select {
 text-transform: capitalize; /* change to lowercase */
 padding-right: 2em;        /* the select's width is based on width of its longest 
 non-transformed ... */
                         /* option.  padding ensures that option is completely 
 visible */
}

and remove the below style

option:first-letter {
  text-transform: uppercase; /* change first letter to uppercase */
}

edited Nov 28 '18 at 13:18

answered Nov 28 '18 at 12:55

Sonal Borkar

531
1
6
12

If you output code, don't use css, output well formatted text. More easier, less css output to load and manage. Work 100% – Shim-Sao Nov 28 '18 at 13:09

score 0 · Answer 3 · answered Nov 28 '18 at 13:01

0

option {
text-transform: capitalize;
}

Remove this line

option:first-letter {
  text-transform: uppercase; /* change first letter to uppercase */
}

answered Nov 28 '18 at 13:01

Shamsiar Hamid

37
9

text-transform: Capitalize don,t work for elements

3 Answers3

text-transform: Capitalize don,t work for