I am trying to achieve a specific effect where the label changes color when the input box is in focus. However, my current CSS code does not seem to be working as expected. Can someone please explain why and provide a solution to fix this issue?
.test-label{
color: purple;
}
.test-box:focus .test-label{
color: blue !important;
}<form>
<label class = "test-label">Label</label>
<br />
<input type = "text" class = "test-box">
</form>You can utilize the focus-within pseudo-class for achieving this.
Keep in mind that its browser support is limited.
.test-label {
color: purple;
}
form:focus-within .test-label {
color: blue;
}<form>
<label class="test-label">Label</label>
<br />
<input type="text" class="test-box">
</form>Try rearranging your code to place the input element inside the label and make use of the :focus-within selector (please note that this may not be supported in IE or Edge browsers)
.custom-label {
color: orange;
}
.custom-label:focus-within {
color: green;
}<form>
<label class="custom-label">Custom Label
<br />
<input type="text" class="custom-input">
</label>
</form>Make sure to place the
labelelement after theinputelement and use the General Sibling Selector. Set the label's position toabsoluteto keep it on top of the input field.
.myInput:focus~label {
color: blue !important;
cursor: pointer;
}
.test-label {
color: purple;
position: absolute;
top: 0;
left: 0;
}
.test-box {
position: relative;
}
.myInput:focus~label {
color: blue !important;
cursor: pointer;
}
.myInput:hover {
color: blue !important;
cursor: pointer;
}<form class="test-box">
<br />
<input type="text" class="myInput">
<label class="test-label">Label</label>
</form>This solution is compatible with all modern browsers. I hope this explanation helps you with your design.
.title{
font-size: 20px;
text-align: center;
}
.content-box:hover .content-label{
color: green !important;
cursor: pointer;
}<div class="content-box">
<p class = "content-label">Content</p>
<br />
<span>Some text here</span>
</div>Eliminate the unnecessary selector ".test-box:focus".
.test-label{
color: purple;
}
.test-box:focus {
background-color: blue !important;
}<form>
<label class = "test-label">Label</label>
<br />
<input type = "text" class = "test-box">
</form>I have a ul-li list and when i hover last li ::before element looks white and not so good. I want to change it when i hover the last li element. How can I achieve this? Here are my codes: <div className="dropup-content"> <ul> & ...
<form id="myForm"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname"><br> <label for="mname">Middle name:</label> ...
Hey there! I have a quick question - Is it possible to have multiple mdl-sheets on one page that all share the same form? I tried implementing this but ended up with them overlapping each other instead of displaying next to each other from left to right. ...
I'm currently attempting to implement a basic pulse effect by utilizing JQuery to modify the background color. However, I am facing issues with animating the backgroundColor property. function show_user(dnid) { /* dnid represents the HTML ID of a ...
I'm experiencing an issue with this code where it opens another webpage while leaving the login screen active. I've tried multiple ways to redirect it, such as window.location.href and window.location.replace, but nothing seems to be working. Ide ...
I am facing a challenge with my Twitter Bootstrap list that includes badges and a delete icon. There are two issues I need assistance with: The badge is automatically positioned to the right of the list row, but I would prefer the delete icon to come aft ...
I am having trouble adding validation to a form with radio buttons displayed as labels. I want to show a red border around the radios/labels or outer div when a radio button hasn't been checked before the user submits the form. I have attempted this ...
While working on my website and trying to add a close menu button, I encountered an issue where all the menu buttons stopped functioning. Here is the HTML code snippet: <div id="openMenuButton"> <span style= "font-size:30px;cu ...
Looking for advice on how to position two images within a div using percentages relative to the parent div. Check out this fiddle for reference: http://jsfiddle.net/b9ce626s/ I experimented with setting position: absolute; on the image, but it seems to b ...
I am working on a layout with 4 columns, each containing images of different sizes followed by a hover effect with an absolutely positioned mask. The width of the mask is currently exceeding the width of the images. Is there a way to ensure that the mask ...
Recently, I decided to enhance my understanding of JavaScript by experimenting with it on various websites. My goal was to use JavaScript to remove the right bar from a webpage and have the remaining body text automatically fill in the space left behind. ...
My issue is as follows: I am attempting to retrieve text from a JSON file in my HTML. In the header of my HTML, I have linked a tag with the following code: var language = ""; var langDoc = null; //Function to change the value function setLang() { v ...
Trying to customize the background-color and color of li, but despite inspecting it, the changes are not reflecting on the page. Does anyone know why this is happening and how to fix it? Update: Here's a link to the JSFiddle. However, when I run it ...
I'm currently working on displaying the terms of use on the initial screen along with two buttons. If the user clicks the accept button, they will be directed to the authentication form. However, if they click refuse, the "Refused Terms" screen will a ...
I have implemented a script on my webpage to toggle the visibility of certain divs by clicking on anchor tags. I found a solution that seems perfect for my needs, but unfortunately it is not working when I try to integrate it into my own website. I suspec ...
Is there a way to fix the error message I am receiving when trying to display response data in charts? The Tankvalue variable seems to be out of scope, resulting in an "undefined" error. The error message states that Tankvalue is not defined. I need to ...
Currently, I am on the PayPal page and I need to automate clicking the agree button. <form id="ryiForm" class="proceed ng-pristine ng-valid" ng-class="{true: 'validated'}[validated]" ng-submit="confirm.$valid && onPay()" novalidate= ...
I currently have the following content displayed on my website: <div style="font-size: 11px; line-height: 17px; text-align: left;"> <p>lorem ipsum etc etc</p> </div> Strangely, despite setting the font size to 11px, the te ...
<marquee> <div class="client"> <img src="images/c1.png"/> </div> <div class="client"> <img src="images/c2.png"/> </div> <div class="client"> ...
I'm having an issue with this code. My objective is to create two filters for this table. The select element with id="myInput" should determine which rows appear in the table and apply the first filter. Here is the JavaScript code: function myFunctio ...