Menu
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 ?
296
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>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" />If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
