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

<input type="text" name="address" value="* Property Address :" />

I would like to select only the first letter of the value property (*) and change it to red color with CSS. Is that actualy possible to do with css ?

are you hiding your value on focus? should it work like a placeholder? — Nikolaj Zander, Aug 23 '13 at 07:49
@Novica89, This can be done using the CSS :first-letter selector. However this cannot be applied directly to input as it is an inline element and CSS :first-letter can only be applied to block elements. In short you need to edit your HTML a bit — MarsOne, Aug 23 '13 at 07:58
I know that it can be done with :first-letter and that it wont work on inputs that is why I am asking how it can be done with value :) — Novica89, Aug 23 '13 at 08:03
:first-letter works only on "letter" [a-zA-Z] (with accents) nothing else — Xavier S., Aug 23 '13 at 08:06
if you want to maintain your HTML then i dont think this is possible with CSS only. You will have to use javascript — MarsOne, Aug 23 '13 at 08:10

Marc J · Answer 1 · 2016-04-13T00:03:47.843

Edit: I just noticed that there is a bug in Chrome that causes the cursor to become in the wrong spot with contenteditable and ::first-letter. It would work for any other case.

I rolled my own (mostly CSS) solution for using <div contenteditable="true"> combined with an <input type="hidden"> a while ago, and I now share it with you. It emulates a text input, yet is a div. If the div is class text then input is forced to be on 1 line (otherwise it is closer to a textarea). The div comes with a placeholder that is its data-placeholder attribute. The form-remote-input attribute signals to the JS which input to fill hold the value of the div. To meet the requirements, I added ::first-letter {color: #F00;} to the div. Run the code snippet to see my false input.

function remote_input_updater(element, scope) {
  var scope = typeof scope !== 'undefined' ?  scope : document;
  var remote_id = element.getAttribute('form-remote-input');
  var remote_element = scope.querySelector("#" + remote_id);
  // Load initial value
  element.textContent = remote_element.value;
  // Add blur event updater 
  var update_remote = function(e){
    remote_element.value = element.textContent;
    if(element.textContent == "") { // Remove extra <br>s that get added
      while (element.firstChild) {
        element.removeChild(element.firstChild);
      }
    }
  }
  element.addEventListener('blur', update_remote);
};

[].forEach.call(document.querySelectorAll('[form-remote-input]'), function(element){remote_input_updater(element)});

[contenteditable] {
  color: #000;
  border: 1px solid black;
  padding: 3px;
  min-height: 1.2em;
}

[contenteditable]:empty::before{
    content: attr(data-placeholder);
    color: #666;
}

[contenteditable=true]:empty:focus::before{
    content: "\00a0";
}

[contenteditable]:focus {
  outline: none;
}

/* Forces single line */
.text[contenteditable] br{
    display:none;
}

.text[contenteditable] * {
  display: inline;
}

#first-red::first-letter {
  color: #F00;
}

<body>
<div class="text" id="first-red" data-placeholder="This is essentially an input" contenteditable="true" form-remote-input="remote-id"><!-- Must be no whitespace in here --></div>
<input type="hidden" id="remote-id" />
</body>

score 3 · Answer 2 · edited Jan 25 '18 at 20:36

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:

<html>
    <head>
        .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;
        }
    </head>
    <body>
        <input type="text" name="address" value="* " class="leftInput" /><input type="text" name="address" value="Property Address :" class="rightInput" />
    </body>
</html>

.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;
}

<input type="text" name="address" value="* " class="leftInput"
/><input type="text" name="address" value="Property Address :" class="rightInput" />

score 0 · Answer 3 · edited May 23 '17 at 12:10

You cant do it by using an "input tag".

You have to use a div tag (cf: How do I make an editable DIV look like a text field?), then use another tag (like div) only for your first char, then apply your style on it.

    <html>
    <head>
    <style>
    #input {
        -moz-appearance: textfield;
        -webkit-appearance: textfield;
        background-color: white;
        background-color: -moz-field;
        border: 1px solid darkgray;
        box-shadow: 1px 1px 1px 0 lightgray inset;  
        font: -moz-field;
        font: -webkit-small-control;
        margin-top: 5px;
        padding: 2px 3px;
        width: 398px;    
    }
    </style>
    </head>
    <body>
    <div id="input" contenteditable><span style="color: red;">*</span>Property Address :</div>

    </body>
    </html>

Another solution by DivinusVox (works only if the first char is a letter):

    <html>
    <head>
    <style type='text/css'>
    #input:first-letter {
        color: red;
    }

    #input {
        -moz-appearance: textfield;
        -webkit-appearance: textfield;
        background-color: white;
        background-color: -moz-field;
        border: 1px solid darkgray;
        box-shadow: 1px 1px 1px 0 lightgray inset;  
        font: -moz-field;
        font: -webkit-small-control;
        margin-top: 5px;
        padding: 2px 3px;
        width: 398px;    
    }
    </style>
    </head>
    <body>
    <div id="input" contenteditable>o Property Address :</div>

    </body>
    </html>

This does appear to work: http://jsfiddle.net/mMdPc/. One worry might be utilizing HTML5 validation with these pseudo inputs. — DivinusVox, Aug 23 '13 at 07:50
Lose the span and roll with ```#input:first-letter``` selector. — DivinusVox, Aug 23 '13 at 07:53

score 0 · Answer 4 · answered Aug 23 '13 at 08:01

OK try to give your input a padding, wrap your input in a relative positioned div and then add a absolut positioned div with your " * " inside this padding of your textbox.

with jQuery or javascript hide the div on focus and show it again on blur if the value is empty

<div style="position: relative">
  <input type="text" style="padding-left: 20px;" name="address" value="Property Address :" onfocus="$('#placeholder1').hide();" onblur="if ($(this).val() == '') {$('#placeholder1').show();}" />
  <div id="placeholder1" style="position: absolute; top: XXpx; left: XXpx; color: #123456;">*</div>
</div>

padding, top and left value is just an example. you have to find the right values

Just to correct: top: 0px; and left: 5px; color: red – Xavier S. Aug 23 '13 at 08:07 — Xavier S., Aug 23 '13 at 08:07

score 0 · Answer 5 · answered Aug 23 '13 at 08:12

0

You can do this by javascript and jquery like this

var firstLetter =  $("input").val().charAt(0);
var val = $("input").val();
$("input").val(val.substr(1));
var span = "<span style='color:red'>" + firstLetter + "</span>";
$(span).insertBefore("input");

jsfiddle

answered Aug 23 '13 at 08:12

vborutenko

4,323
5
28
48

I think, his request its insert a character "red" in input text area – Xavier S. Aug 23 '13 at 08:14
This insert the char in front of the value of the input area ( in front of the input ) – Novica89 Aug 23 '13 at 08:16

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

5 Answers5

Linked

Related