Here lies my input field https://i.sstatic.net/0mJyJt.png, I'm striving to make the last character '*' appear in bold red rather than blending into the background.
Despite numerous attempts, I haven't been successful in achieving the desired result. Any assistance on this matter would be greatly valued.
To change the color of a placeholder, you can use the ::placeholder selector. However, it is not possible to change the color of just one letter in the placeholder.
If you want to customize the color of specific letters in a placeholder, you can create a custom input using HTML and CSS.
/**
* Here is a basic example of how you can customize your input using HTML and CSS.
*/
.input {
background-color: #fff;
border-radius: 3px;
position: relative;
display: inline-block;
border: 1px solid #888;
}
input {
background-color: transparent;
position: relative;
padding: 5px;
z-index: 1;
border: none;
}
.placeholder {
position: absolute;
color: #ccc;
left: 5px;
top: 50%;
transform: translateY(-50%)
}
/* Display an asterix when the input is required */
input:required + .placeholder::after {
content: "*";
color: red;
}
/* Hide the placeholder when the user starts typing */
input:focus + .placeholder {
visibility: hidden;
opacity: 0;
}<div class="input">
<input type="text" name="name" required />
<span class="placeholder">Your name</span>
</div>Instead of using the placeholder="" attribute in your input, you can place the text inside a custom span element with the class name placeholder.
If the input is marked as required, the CSS will add an asterix to indicate the requirement.
let placeholder = document.getElementsByClassName('placeholder')[0];
placeholder.addEventListener('click',(e)=>{
e.target.style.display="none";
document.querySelector('input').focus();
}
);
document.querySelector('input').addEventListener('focusout',(e)=>{
if(e.target.value == ''){
placeholder.style.display = 'inline';
}
})
document.querySelector('input').addEventListener('focus',(e)=>{
if(e.target.value == ''){
placeholder.style.display = 'none';
}
}) .input{
position: relative;
}
.placeholder{
position: absolute;
left: 5px;
opacity: 0.5;
top: 2px;
user-select: none;
}
.placeholder::after{
content: ' *';
color: red;
opacity: 1;
} <div class="input">
<input type="text">
<span class="placeholder" >Your PlaceHolder</span>
</div>Can anyone assist me with creating an interactive map where continents light up as you hover over them? I am using multiple images within div elements in order to achieve this effect. Specifically, I want to change the background image of one div when hove ...
Is there a way to adjust the content to fill in the margin space when the browser is resized smaller? http://jsfiddle.net/denWG/62/ Html: <div class="jp-sleek jp-jplayer jp-audio"> <div class="jp-gui"> <div class="jp-controls jp-ico ...
My SVG icon is currently aligned to the left, but I want to center it. I tried using the following code, but it doesn't seem to be working: .parent{ display: flex; align-items: center; font-size: 13px; } span{ margin-right:10px } https://i.sstatic.ne ...
Having trouble changing the background color of the <AppBar> in my project. Using the Container component to set a maximum screen size, but encountering issues when the screen exceeds this limit. The AppBar background color appears as expected while ...
I attempted to create a fixed header, specifically a Toolbar, inside a LeftNav so that when the LeftNav is scrolled, the Toolbar remains in place. However, for some reason, setting position: 'fixed' on the Toolbar does not work within the LeftNav ...
What are the dimensions in pixels and file size in MB? I've been curious about this for a while, appreciate any insights! ...
page in question. I am currently working on a chess board project where each cell is represented by a div element. My goal is to make the board expand beyond certain minimum widths using media queries, but for some reason, this functionality is not working ...
Can anyone help me understand how to move the caption, found in data-title, from underneath an image to the right of the image? I'm not very familiar with HTML/CSS, but it looks like the image is enclosed within a div called .lb-outerContainer, and t ...
I am looking to create a row of buttons within a table, where each button is represented by an image and has a transparent border/background. To achieve this, I placed each button in one of the 10 remaining cells of a table using <td class="col-sm ...
Images are loading only in Firefox and not anywhere else. Here is the import statement: import gradient from '../public/mountains/gradient.svg' And here is the Image component: <div id='gradient' className={`${styles.bgimage} ${sty ...
Is there a way to achieve the same effect as seen in images 2 and 3 here: Although these images already have their own "padding," I'm curious if it can be replicated using just jQuery and CSS? I would appreciate any help or insights on this. Thank y ...
My media queries are not working in my next.js project. Here is what I have tried so far: I added my queries in "styles.module.css" and "global.css" and imported them in layout.js I included the viewport meta tag under a Head tag in layout.js This is how ...
Currently, I am in the process of developing a task manager for my application and facing an obstacle when trying to calculate the height of a widget. My goal is to determine the maximum height (assuming a minimum height is already set) by subtracting a ce ...
As I embark on creating my inaugural DotNetNuke website, I find myself faced with the task of adding an HTML module to a page. To style the text within it, I have been advised to utilize CSS classes. I'm curious about where .css files should be place ...
Is it possible to have a span with a static width of 20px (like col-2) placed between two blocks with content in Bootstrap, where the blocks split the rest of the available space? Here is an example code snippet: https://jsfiddle.net/Alexik/krexqp5m/1 Co ...
import React from 'react'; import Slick from 'react-slick'; import style from './Slider.module.css'; import {Link} from 'react-router-dom'; const SliderTemplates = (props) => { let template = null; const ...
I have 5 image links displayed side by side, but when I hover over them, they act as one collective link. Can someone please assist me with resolving this issue? After updating my code to include the entire div, it seems that there is something within the ...
I've been attempting to connect a CSS file to my HTML index file, but I can't seem to get it to work no matter what I try. I'm using VSCode. When typing the link from scratch, it auto-completes or shows up, indicating that it recognizes it. ...
Trying to style some cards on my website using HTML and CSS, I noticed that the aspect ratio of the cards gets distorted when resizing the window. This issue only seems to happen in Safari, as Chrome handles it fine. I'm not sure which specific comma ...
/*---Creating a Popup Menu with CSS---*/ .box{ position:fixed; top: 0.1%; left: 14px; display: inline-block; cursor: pointer; } ul{ list-style-type: none; } ul li{ font-family: Lato; padding: 10px; } ul li a{ text-decoration: none; color: black; } ul li:ho ...