Trouble with CSS styling for focused input fields

Attempting to style a form by Patriot with CSS, I encountered an issue.

input#card-month:focus ~ label.card-label.label-cardExpiryYear {
    font-size: 20px !important; /* This works fine */
}

input#card-month:focus ~ label.card-label.label-cardExpiryMonth {
    font-size: 20px !important; /* Not working */
}

Curious about the inability to apply CSS to "child" labels. Any assistance would be greatly appreciated! https://i.sstatic.net/2PqEY.png

HTML:

<form class="paytriot-payment" action="/order-pay/52009/?key=wc_order_lcX8mI6WA4hUj&amp;step=2" method="post" id="Paytriot_payment_form">
    <label class="card-label label-cardNumber">Card Number</label>
    <input type="text" class="card-input field-cardNumber" name="cardNumber" value="" required="required" id="card-number">
    <label class="card-label label-cardExpiryMonth">Card Expiry Month</label>
    <input type="text" class="card-input field-cardExpiryMonth" name="cardExpiryMonth" value="" required="required" maxlength="2" id="card-month"><label class="card-label label-cardExpiryYear">Card Expiry Year</label>
    <input type="text" class="card-input field-cardExpiryYear" name="cardExpiryYear" value="" required="required" maxlength="4" id="card-year">
    <label class="card-label label-cardCVV">CVV</label><input type="text" class="card-input field-cardCVV" name="cardCVV" value="" required="required" id="card-cvv"><div class="payment-buttons"><br>
</form>
csswordpressinputcss-selectors

Answer №1

When labels precede input elements, styling inputs in CSS becomes challenging. You can target labels specifically by class or select all labels within the form.

To modify the label based on input focus, it is recommended to place the label after the input. However, this may impact the form's layout. Alternatively, you can utilize JavaScript for this functionality.

document.querySelectorAll('.paytriot-payment .card-input').forEach(inp => {
  const inpClass = Array.from(inp.classList).find(cl => /^(field-)/.test(cl));
  if (inpClass) {
    const lblClass = inpClass.replace('field-', 'label-');
    const lbl = document.querySelector('.' + lblClass);
    inp.addEventListener('focus', () => {
      lbl.classList.add('label-js-focus');
    });
    inp.addEventListener('blur', () => {
      lbl.classList.remove('label-js-focus');
    });
  }
});
.paytriot-payment .card-label {
  color: green;
}

.paytriot-payment .label-cardNumber {
  color: red;
}

.field-cardCVV:focus ~ .label-cardCVV {
  color: blue;
}

.label-js-focus {
  font-weight: bold;
}
<form class="paytriot-payment" id="Paytriot_payment_form">

  <label class="card-label label-cardNumber">Card Number</label>
  <input type="text" class="card-input field-cardNumber" name="cardNumber" value="" required="required" id="card-number">
  
  <label class="card-label label-cardExpiryMonth">Card Expiry Month</label>
  <input type="text" class="card-input field-cardExpiryMonth" name="cardExpiryMonth" id="card-month">
  
  <label class="card-label label-cardExpiryYear">Card Expiry Year</label>
  <input type="text" class="card-input field-cardExpiryYear" id="card-year">
  
  <input type="text" class="card-input field-cardCVV" id="card-cvv" placeholder="Focus CSS">
  <label class="card-label label-cardCVV">Label Follows Input</label>
  
</form>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Move the navigation bullets of the Nivo Slider to the bottom instead of below the slider

Currently working on a website and have incorporated Nivo Slider to develop a jQuery slider. Encountering an issue with the bullets that indicate which slide the user is currently viewing. I'd like these bullets to be displayed on the images within t ...

javascriptjqueryhtmlcssnivo-slider

Detecting the specific button that was selected with PHP

I am in the process of developing a website for a production company where, upon clicking on a director's name from the menu, all other menu items disappear and only the selected director's biography and work are displayed. My current challenge ...

phpjavascriptjquerymysqlcss

Using the `position: sticky` property does not function properly if the HTML element has a height set to

Here is the CSS code I have for the two important items... html, body { background-image: url("../images/background.png"); background-attachment: fixed; height: 100%; } --and-- #navBar { font-family: Cinzel; position: sticky; t ...

htmlcssheightnavbarsticky

Adjust the span's width to make it shift position

Currently, I am in the process of learning HTML and there is a specific question that has come up for me. Within my <div class="input-group">, there are three elements: one span, one input field, and another span: <span class="input-group-addon q ...

htmlcsstwitter-bootstrap

Scrollbar customization feature not functional in Firefox browser

I recently finished developing a website and I have customized the main vertical scrollbar. Unfortunately, I am facing an issue where it works well on Google Chrome and Safari but not on Mozilla Firefox. Does anyone have any suggestions on how to trouble ...

cssfirefoxwebkitscrollbarcustomization

Continuous Div Carousel with Looping in jQuery

I have developed a basic carousel to cycle through a series of divs, but I am facing some issues. I want the carousel to loop continuously so that after reaching "slide 07," it goes back to "slide 01." Unlike using a carousel plugin, I prefer having an ove ...

javascriptjqueryhtmlcss

Arrange the child divs on top of the parent div

<div id="1"> <div id="2"> </div> </div> It is proving challenging to position div2 above div1 in the vertical dimension. Applying a negative top position does not have the desired effect, as it appears that the top border of the ...

htmlcsscss-position

Scroll Bar Menu (User-Controlled)

I'm looking for any libraries out there that can replicate or provide a similar horizontal scrolling menu to that of espn.com's homepage. I'm relatively new to jquery and feeling a bit lost on where to begin. I did some searching on Google, ...

javascriptjquerycss

Using a single jQuery script, implement multiple modals on a webpage that are responsive on both desktop and mobile devices

My Modal is functioning well on desktop, but I'm facing an issue on mobile where the screen doesn't close when clicking outside the modal area. Is there a way to solve this for mobile without adding the 'X' button to close it? I attem ...

jqueryhtmlcssmodal-dialog

Enhance your web design with the mesmerizing jQuery UI drop effect combined

I'm attempting to create an animated toggle effect on a box using jQuery UI's drop feature. However, I've encountered some trouble due to the box having box-sizing: border-box applied which is causing issues with the animation. During the a ...

jqueryjquery-uicss

Center the navigation links within the navigation block

I am using the startbootstrap-small-business template and customizing it to fit my requirements. I have inserted a new logo which caused me to adjust the height of the navbar to approximately 120px. Now, my goal is to vertically align the links on the righ ...

htmlcsstwitter-bootstrap

Can a JavaScript framework be created to ensure all browsers adhere to standards?

As someone who isn't an expert in JavaScript, I wonder if it's feasible to create a comprehensive embeddable JavaScript file that ensures all browsers adhere to standards. Could there be a compilation of known JavaScript hacks that compel each br ...

javascriptcssdomstandards

Display the latest item using React

I've encountered a problem with displaying the last message in my pet chat application. Currently, I have to manually scroll to the bottom every time I open the chat in order to see the latest message. This scrolling behavior is not very user-friendly ...

cssreactjsnext.jsfrontend

What is the best way to synchronize the scale of images with the tempo of a song?

I just started learning CSS, JS, and HTML and I have a question about scaling an image based on a song. Despite searching through YouTube and various forums, I still haven't found a solution. Any help would be greatly appreciated :) Here is the HTML ...

javascripthtmlcsstransformscale

Eliminate the gaps within CSS3 columns

I'm attempting to achieve an effect that looks like: C---------------------------------------) | Address 1 | Phone Numbers | | Address 2 | Times place is open | (---------------------------------------) However, the spacing with th ...

htmlcss

The div height adjustment peculiarities in IE7 and IE8 are causing quite a stir

I recently encountered a problem with my HTML/JS code that I thought was simple. The code is designed to expand the size of a div on mouseover and then collapse it back on mouseout. Here's how the code looks: CSS: .sign-in-up { position: absolut ...

javascripthtmlcssinternet-explorer-8internet-explorer-7

Vue 3 has a known issue where scoped styles do not get applied correctly within the content of a <slot> element

Utilizing the Oruga and Storybook libraries for creating Vue 3 components. The code in the Vue file looks like this: <template> <o-radio v-bind="$props" v-model="model"> <slot /> </o-radio> </template ...

javascriptcssvue.jsvuejs3

I'm having an issue where my footer is getting cut off when I resize the browser and start side scrolling. Can

I designed a webpage with a footer that contains another div holding centered content. The footer is supposed to span the entire width, while the inner content div is set to 960px with a margin auto to center it. <footer> <div class="footer-in ...

csshtmllayout

Angular Material - Data Table Kit

Struggling with setting custom styling for a mat-table in Angular Material. I want to adjust the border radius of the table and change the spacing inside to "space-between". The design I'm aiming for is shown here: Design Any tips or suggestions woul ...

htmlcssangularangular-material

Is It Possible to Use Separate Stylesheets for Different Web Browsers?

I have been trying to implement a JavaScript code that loads a specific stylesheet based on the user's browser. However, it seems like the code is not functioning correctly as none of the stylesheets are being displayed. I have meticulously reviewed t ...

javascriptjquerycss