Can you change the color of the last character in a placeholder text? I couldn't find any solutions related to this.
<input type="text" class="f_name" name="fname" placeholder="First Name*">
It should look like the image below
Can you change the color of the last character in a placeholder text? I couldn't find any solutions related to this.
<input type="text" class="f_name" name="fname" placeholder="First Name*">
It should look like the image below
No need for JavaScript in this solution.
Check out this CSS-only method:
Create a background gradient with a red portion at the end, then adjust the background to fit the text perfectly.
NOTE: Keep in mind that the gradient percentage is based on the input field's width, not the text itself. Therefore, any changes to the text will require corresponding adjustments to the gradient percentages.
input {
padding: 10px;
}
::-webkit-input-placeholder {
background: -webkit-linear-gradient(left, #AAA 0%, #AAA 46%,red 46%, red 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}<input type="text" class="f_name" name="fname" placeholder="First Name*">If you want to achieve this effect, here is a neat trick for you: Simply address the placeholder text, add a "required" class to necessary inputs, and leverage the :after pseudo element to include a colored asterisk. Please note that this method is specifically designed for Webkit browsers.
Alternatively, you can utilize spans within the label to represent the value text.
Here is an example of the HTML markup:
<label><span class="title">Name<span class="symbol">*</span></span>
<input type="text" />
</label>
For the necessary styling, refer to the following CSS:
label {
position: relative;
}
label:hover span {
display: none;
}
input[type="text"]:focus, input[type="text"]:active {
z-index: 2;
}
label input[type="text"] {
position: relative;
}
.title {
color: gray;
position: absolute;
left: 5px;
top: 1px;
z-index: 1;
}
.symbol {
color: red;
}
Additionally, you can use jQuery to hide the span when the input is populated. Here is a sample jQuery script:
$('input[type="text"]').blur(function() {
if( $(this).val().length >= 1) {
$(this).toggleClass('active');
}
else {
$(this).removeClass('active');
}
});
Need help with adjusting the dropdown height for the ng-select form image. Currently, it is only displaying 5 items and I would like it to show 8-10 items. Below is the code I am using: <form [formGroup]="addReportForm" class="form-hori ...
Following an AJAX request, I have successfully generated two select boxes: $("#job_id").change(function() { var id = $(this).val(); $.ajax({ url: '', type: 'POST', dataType: 'json', dat ...
Recently, I developed a JSP page within the webapp that utilizes jquery, CSS, and Angular JS. The files jquery-1.12.0.js, angular.min.js, and TableCSSCode.css are all located in the same directory as the JSP page. Initially, my application context was set ...
Currently, I am attempting to utilize JavaScript to upload a file named example.dat. Initially, I believed that the correct approach would be using fileReader; however, it appears that this method is unable to process this specific format. The objective i ...
I am working on a definition list where I need to vertically center the text within each dd element. dl, dt, dd { margin:0; } dt { background: blue; } dd { min-height: 100px; background: gold; border-bottom: 3px solid white; } <dl ...
I'm having an issue with the spacing between my radio button and radio button text box in my struts tag. It seems to be congested. Any suggestions on how to create more space between them? <div class="form-group"> <label class="col-lg- ...
After multiple attempts, I am still facing an issue with setting up the Google Map on my website. Despite inputting different coordinates, it consistently shows a location in China instead of the intended one. Here is the code snippet that I have been usin ...
Currently, I am working on implementing a bootstrap 3 input group, but unfortunately, the outcome is not meeting my expectations. My goal is to create a select [input]-[input text]-[button] structure all in one line. However, in my scenario, the button has ...
I am striving for the cleanest code possible. Can an article and an aside have padding, margins, etc? I have been struggling to achieve this. I find myself having to add a div with a class that accepts padding. article { width:463px; float:left; ...
Encountering validation errors with the following code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <hea ...
I created an animated .svg file that you can view here, but I encountered an error when trying to open it in the browser: https://i.sstatic.net/YMf5L.png The color appears different, even though the code remains the same. <svg id="Layer_2" data-name ...
My code was working perfectly until I decided to add some CSS to it. You can view the code snippet by clicking on this link (I couldn't include it here due to issues with the code editor): View Gist code snippet here The code is based on Bootstrap. ...
I'm currently developing a jQuery function to implement the "lavalamp" effect on my navigation bar. Everything seems to be working smoothly, except for one issue. If you hover over an item (e.g., Community Service) and then move your mouse away from ...
I currently have numerous input fields within a form, and some of them are structured like this: <input name="agents[]" type="file" /> Additionally, imagine there is a plus button next to this field as shown below: <img src="plus.jpg" id="some_ ...
Seeking a way to showcase data obtained from an external API on a webpage using Angular's string interpolation. If no data is retrieved or is still pending, the aim is to display 'N/A'. An attempt was made following this method, but encoun ...
I'm working with the following div that contains an input and a label: <div class="js-form-item "> <input type="checkbox" id="checkboxes-11" class="type-checkboxes form-checkbox"> <label for="option-a-checkboxes-11" class=" ...
I am working on a three div with expand collapse functionality. When I expand one div, I want to set some image to the other divs. And when I go back to normal mode, I need the original content that was inside each div. $("a.expansion-btn").click(functi ...
I'm struggling with creating a custom slider and am having trouble placing the navigation buttons on the sides. You can view the current layout on JSfiddle: http://jsfiddle.net/zfxrxzLg/1/ Currently, the navigation buttons are located underneath the ...
I'm having trouble applying my CSS to a specific img ID element on the page. I've been trying to solve this for about 30 minutes with no luck. The strange thing is, I have two other elements with the same HTML and CSS that are working correctly. ...
I've implemented a responsive grid where each item has its own hidden details section that is revealed upon clicking the item. The structure of the HTML/CSS setup is as follows: <div class="grid"> <div class="item"> ...