CODEWITHSUNDEEP
csswordpressinputcss-selectors
Vladimir Kyatipov
Vladimir Kyatipov

Reputation: 736

Css issue with focus input

I tried to add some css styling to form by Patriot. I have this issue.

input#card-month:focus ~ label.card-label.label-cardExpiryYear {
    font-size: 20px !important; /* it's working one */
}

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

I am wondering why cannot add css for "child" labels.. Any help will be appreciated! enter image description here

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>

Upvotes: 0

Views: 238

Answers (1)

keymasterr
keymasterr

Reputation: 471

As far as labels are before the corresponding input elements you can't rely on inputs in your CSS. You either should select the label by it's specific class or select all the labels in the form.

To change the label according to input focus, the label should be after the input (not sure if it won't break the view of this form though). Or else you may need some JavaScript for this.

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>

Upvotes: 1

Related Questions