How to change first-letter in input html element to uppercase, CSS only

Question

Hello guys I am try to get only the first letter on this input element as upper case input::first-letter is not recognize, only input{text-transform: uppercase;}

and I try to achieve only value be Hello world how can I implement it on CSS only?

*that issue happened only on input element

input::first-letter {
  text-transform: uppercase;
}

<input type="text" name="name" value="hello world">

https://codepen.io/lichaytiram/pen/JjWmqxo

score 1 · Answer 1 · answered Jun 12 '21 at 18:57

1

According to MDN - ::first-letter

The ::first-letter CSS pseudo-element applies styles to the first letter of the first line of a block-level element.

<input> is not a block level element. For example you can see it working for a <p> element, which is block-level

input {
  display: block; /* still doesn't work */
}

p::first-letter,
input::first-letter {
  text-transform: uppercase;
}

<input type="text" name="name" value="hello world">
<p>hello world</p>

answered Jun 12 '21 at 18:57

T J

42,762
13
83
138

if I add `display: block;` it still not working, How can I fix it? – Lichay Tiram Jun 12 '21 at 21:53
@LichayTiram that is the point, it won't work. I put it there with the comment to show that it won't work – T J Jun 13 '21 at 06:35
So don't have any way to implement it? – Lichay Tiram Jun 13 '21 at 11:18
@LichayTiram you can do this with JavaScript, not with CSS – T J Jun 13 '21 at 11:20
oh it so weird should be so easy with CSS, with js the implementation complex? – Lichay Tiram Jun 13 '21 at 11:30
*"...should be so easy with CSS"* - there is no way to do it with CSS at the moment. Unless this is implemented for inline elements in future CSS spec... – T J Jun 13 '21 at 11:32

How to change first-letter in input html element to uppercase, CSS only

1 Answers1