div:empty:not(:focus):before {
content: attr(data-text);
}
div:focus:before {
content: "";
}<div data-text="placeholder text..."></div>The CSS code above is used to show placeholder text in a <div> element, but the issue arises when clicking on the element, as the placeholder text does not disappear.
There seems to be an issue with the div:focus:before selector. What could be wrong with this approach?
The :focus pseudo-class is limited to elements that are able to be focused, such as form elements (<input>, <select>, etc.) and links (<a>). Since the <div> element in your code cannot receive focus by default, the :focus pseudo-class will not have any effect.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div:empty:not(:focus):before {
content: attr(data-text);
}
div:focus:before {
content: "";
}
</style>
</head>
<body>
<div tabindex="0" data-text="placeholder text..."></div>
</body>
</html>This implementation allows the <div> element to become focusable when clicked on or tabbed to using the keyboard. By setting the tabindex attribute, the :focus pseudo-class functions as intended, causing the placeholder text to disappear once the <div> element is in focus.
div[contenteditable]:empty:not(:focus):before {
content: attr(data-text);
color: gray; /* You can customize the color */
}
div[contenteditable]:focus:before {
content: "";
}<div contenteditable="true" data-text="placeholder text..."></div>I believe this solution aligns with your response.
Consider replacing your <div> tag with either <input> or <textarea> as shown below:
<input type="text" placeholder="placeholder text...">
<textarea placeholder="placeholder text..."></textarea>
I'm having trouble getting checkboxes to display on a form for users to choose workshops. I am using the Materialize CSS gem with Rails. Here is my form: <div class="row"> <% workshops = Workshop.all.order("date") %> <% workshops. ...
Encountering an error while debugging an Angular JS application in the WebStorm IDE. The error message states: "XMLHttpRequest cannot load file:///C:/Users/../list.html. Cross origin requests are only supported for HTTP." Provided Javascript code : var a ...
I'm fairly new to the world of web development, with knowledge in CSS & HTML and currently learning TypeScript. I'm attempting to create a message icon that opens and closes a notifications bar. Here's where I'm at so far: document.getE ...
I want to enhance the appearance of my popup window by applying a different format for opening it. How can I style it so that it looks visually appealing when the popup window opens? You can find below the source code I am working with: HTML: <div onM ...
Hey there, I am looking to update the value of the binding variable 'click' once the onReady block in the HTML is executed. I have managed to communicate from Swift to HTML using evaluate JavaScript. However, I am now trying to figure out how to ...
I have a web app that features a template for displaying a list of books retrieved from the server using Python (Flask). The information about the books, including titles, IDs, and authors' names, is stored in the variable "books" which I then loop ov ...
I am currently working on building my personal website. I am looking to include a link to my Stack Exchange profile on my site using the Stack Exchange icon. However, the icons available in Font Awesome are grayscale and not colored like other icons such a ...
I am working with pre parameters that determine the input for my query. For one scenario, I need to search for all UUIDs, while in another situation, I only want to look for specific UUID numbers. Instead of splitting this into two separate calls as shown ...
After working on developing a website using Chrome and Firefox, I've come to realize that it appears broken when viewed on Internet Explorer. Fixing the issue is turning out to be more challenging than I had initially anticipated. The primary problem ...
I have a single word that needs to be hyphenated, but the lang=en hyphenate: auto property does not work on capitalized words. To address this, I utilized the slice function in JavaScript to split the word in half so that the second half, which requires h ...
This particular issue is causing frustration as it seems to only work with a specific set of images and not with others. The object in question is: function PreLoader(toLoad, parent, images) { var errored = 0; var loaded = 0; var toLoad = toLoad; ...
In my project, I am trying to implement a feature where an error message should be displayed next to the control if the "ToDate" is before the "FromDate". Currently, I have set a minimum date which successfully disables the selection of ToDate before FromD ...
The two div elements are colored differently, with the right column (pink) not aligning properly with the left column (green). For reference, here is my fiddle: JSfiddle * { margin: 0px; padding: 0px; border: 0px; } #wrapper { width: 960px; m ...
<script> var myVar = setInterval(myTimer, 1000); function myTimer() { var d = new Date(); document.getElementById("demo").innerHTML = d.toLocaleTimeString(); } </script> <p text-align="right" id="demo" style="font-family:Comic Sans ...
Within my Angular application I have implemented the following code to customize the body style: constructor(private elementRef: ElementRef) { } ngOnInit() { this.elementRef.nativeElement.ownerDocument.body.style.overflowY = 'hidden'; ...
Having trouble articulating the correct term or language I need, making it difficult to search. Q: How can I push a line of text from the server side to the user? I am developing an MVC 4 application using asp.net and c# in .net4. One page will feature a ...
Currently, I am working on a project that involves an ordered list (ol), and I am trying to add pseudo elements (::before,::after) to enhance its appearance. Strangely, when I write ::before and ::after separately, the styles are applied and visible on the ...
As a beginner developer embarking on my first web page project, I've encountered a challenge. The text I inserted into a flexbox refuses to align beneath the image. .title { text-align: center; width: 500px; margin-left: auto; margin-right: a ...
Previously, I stored my component data within the element's data parameter. Should I continue doing this or switch to using an Ajax call to fetch the data? 1. Using data parameter: <a href="#" data-core="{JSON-data}" id="item-1"> <a href ...
My code is designed to call the addpoc() method on button click, which generates a set of input boxes and a dropdown. When the dropdown option personal/workmail is selected, an input box should appear based on the selection. The issue arises after the init ...