Select first letter of input value and change it's color via CSS

Question

Is there a way to select the text input values first letter and change its color via CSS in the stylesheet? so for example, I have

Answer 1

I don’t think that input boxes will allow changing the style of the first letter – it seems the OS does not make it possible. So you can make a div with contentEditable property equal to "true", and get its content with JavaScript, or a small workaround with two inputs aligned horizontally, or something. See this:

    
        .leftInput{
            border-bottom: 1px solid black;
            border-left: 1px solid black;
            border-top: 1px solid black;
            border-right: 0px;
            width:10px;
            color:red;
        }
        .rightInput{
            border-bottom: 1px solid black;
            border-right: 1px solid black;
            border-top: 1px solid black;
            border-left: 0px;
            margin-left: 0px;
        }
    
    
        
    

.leftInput {
    border-bottom: 1px solid black;
    border-left: 1px solid black;
    border-top: 1px solid black;
    border-right: 0px;
    width: 10px;
    color: red;
}
.rightInput {
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    border-top: 1px solid black;
    border-left: 0px;
    margin-left: 0px;
}