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

Question

Welcome To Ask or Share your Answers For Others

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

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

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

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 ?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T17:56:02+0000

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: "0a0";
}

[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>

Categories

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

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

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags