Select First Letter Of Input Value And Change It's Color Via Css
functionremote_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 addedwhile (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><divclass="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><inputtype="hidden"id="remote-id" /></body>
Solution 2:
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><inputtype="text"name="address"value="* "class="leftInput" /><inputtype="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;
}
<inputtype="text"name="address"value="* "class="leftInput"
/><inputtype="text"name="address"value="Property Address :"class="rightInput" />
Solution 3:
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: 1px1px1px0 lightgray inset;
font: -moz-field;
font: -webkit-small-control;
margin-top: 5px;
padding: 2px3px;
width: 398px;
}
</style></head><body><divid="input"contenteditable><spanstyle="color: red;">*</span>Property Address :</div></body></html>
Another solution by DivinusVox (works only if the first char is a letter):
<html><head><styletype='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: 1px1px1px0 lightgray inset;
font: -moz-field;
font: -webkit-small-control;
margin-top: 5px;
padding: 2px3px;
width: 398px;
}
</style></head><body><divid="input"contenteditable>o Property Address :</div></body></html>
Solution 4:
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
Solution 5:
You can do this by javascript and jquery like this
var firstLetter = $("input").val().charAt(0);
varval = $("input").val();
$("input").val(val.substr(1));
var span = "<span style='color:red'>" + firstLetter + "</span>";
$(span).insertBefore("input");
Post a Comment for "Select First Letter Of Input Value And Change It's Color Via Css"