CSS pseudo-class for after-input

[jPaulB]

Hi Everybody,
What pseudo-element can I use to style the value of an <INPUT type="text"> after an input has been done?

.input[type=text]:focus{
background-color: #ffff00;
}

What expression should I use to style after input has been done, and the focus shifts to another input? This expression should only be triggered if an input has been done and not because the focus has moved elsewhere?

.input[type=text]:????????{
background-color:#000000;
}

 

[VBService]

Check this out:

<label for="text1">Text 1 <span><sup>required</sup></span></label>
<input type="text"
       name="text1"
       id="text1"
       placeholder="text1..."
       required>

<label for="text2">Text 2 <span><sup>required</sup></span></label>
<input type="text"
       name="text2"
       id="text2"
       placeholder="text2..."
       required>

<style>
  label {
    display: inline-block;
    margin: .5rem 0 .15rem 0;
  }
  label span {
    color: red;  
  }
  input[type="text"] {
    display: block;
    background-color: white;
    border: 2px solid green;
    background-color: lightgreen;
    background-image: linear-gradient(to right, lightgreen, limegreen);
    font-size: 1rem;
    padding: .15rem .5rem;
    transition: all 250ms ease;
  }
  input[type="text"]::placeholder {
    font-size: 70%;
    letter-spacing: 0;
    transition: all 550ms ease;
  }
  input[type="text"]:focus {
    border-color: grey;
    background-color: lightgrey;
    background-image: linear-gradient(to right, lightgrey, grey);
    /*animation: pulse-shadow 1.45s infinite ease-in-out;*/
  }
  @keyframes pulse-shadow {
    0% { box-shadow: 0 0 1px 2px grey; }
    50% { box-shadow: 0 0 1px 3px black; }
    100% { box-shadow: 0 0 1px 2px grey; }
  }
  input[type="text"]:focus::placeholder {
    color: transparent;
    letter-spacing: 2rem;
  }
  input[type="text"]:invalid:not(:focus) {
    border-color: red;
    background-color: lightpink;
    background-image: linear-gradient(to right, lightpink, lightcoral);
  }
</style>

 

[jPaulB]

Thank you, VBService,

Your example works fine, but I do not follow how the background-color turns green.

 

[VBService]

The correct one is in this place, in this case when is some text in <input>.

  input[type="text"] {
    display: block;
    border: 2px solid green;
    background-color: lightgreen;
    background-image: linear-gradient(to right, lightgreen, limegreen);
    font-size: 1rem;
    padding: .15rem .5rem;
    transition: all 250ms ease;
  }

because we use attribute "required" that mean incorrect ":invalid" when <input> is empty (without text).

  input[type="text"]:invalid:not(:focus) {
    border-color: red;
    background-color: lightpink;
    background-image: linear-gradient(to right, lightpink, lightcoral);
  }

and without cursor (":not( :focus )").

 

[VBService]

In this case: required and pattern both together determine whether the entry is correct or not (:invalid)

<label for="post-code-1">Post code 1<span><sup>required</sup></span></label>
<input type="text"
       name="post_code_1"
       id="post-code-1"       
       pattern="^[A-Z]{1,2}[0-9][0-9A-Z]?\s?[0-9][A-Z]{2}$" 
       placeholder="e.g. SW12 1AA, LN8 1DC"
       required>

<label for="post-code-2">Post code 2 <span><sup>required</sup></span></label>
<input type="text"
       name="post_code_2"
       id="post-code-2"
       pattern="^[A-Z]{1,2}[0-9][0-9A-Z]?\s?[0-9][A-Z]{2}$" 
       placeholder="e.g. SW12 1AA, LN8 1DC"
       required>

<pre>
<b>Examples of Valid UK Postcodes:</b>
SW1A 1AA
B1 1BB
B11BB
EC15 1AB
W1A 0AX
M1 1AE
CR2 6XH

<b>Examples of Invalid UK Postcodes:</b>
12345 (No letters, incorrect format)
B12 1bb (Lowercase in second part of postcode)
SW1  1AA (Too many spaces)
SW1A-1AA (Invalid character -)
M1 AE (Missing a digit in the second part)
AB10  CD12 (Incorrect space and sequence of characters)
</pre>

<style>
  label {
    display: inline-block;
    margin: .5rem 0 .15rem 0;
  }
  label span {
    color: red;  
  }
  input[type="text"] {
    display: block;
    border: 2px solid green;
    background-color: lightgreen;
    background-image: linear-gradient(to right, lightgreen, limegreen);
    font-size: 1rem;
    padding: .15rem .5rem;
    transition: all 250ms ease;
  }
  input[type="text"]::placeholder {
    font-size: 70%;
    letter-spacing: 0;
    transition: all 550ms ease;
  }
  input[type="text"]:focus {
    border-color: grey;
    background-color: lightgrey;
    background-image: linear-gradient(to right, lightgrey, grey);
    /*animation: pulse-shadow 1.45s infinite ease-in-out;*/
  }
  @keyframes pulse-shadow {
    0% { box-shadow: 0 0 1px 2px grey; }
    50% { box-shadow: 0 0 1px 3px black; }
    100% { box-shadow: 0 0 1px 2px grey; }
  }
  input[type="text"]:focus::placeholder {
    color: transparent;
    letter-spacing: 2rem;
  }
  input[type="text"]:invalid:not(:focus) {
    border-color: red;
    background-color: lightpink;
    background-image: linear-gradient(to right, lightpink, lightcoral);
  }
</style>

pattern="^[A-Z]{1,2}[0-9][0-9A-Z]?\s?[0-9][A-Z]{2}$"

• ^[A-Z]{1,2} - The initial letters (1 or 2 uppercase letters, e.g., SW or B).
• [0-9] - A digit (one numeric character, e.g., 1).
• [0-9A-Z]? - An optional additional alphanumeric character (e.g., 1A or just 1).
• \s? - An optional space between the first and second parts of the postcode.
• [0-9] - Another digit in the second part of the postcode.
• [A-Z]{2}$ - Two final uppercase letters (e.g., "AA").