CODEWITHSUNDEEP
htmlcss
user8925307
user8925307

Reputation:

CSS: Detect input with valid data not focused with no javascript

I have been checking similar questions in Stackoverflow, but I can't find the proper way to do this:

I want an input without border. When focused, border is blue. Also, when not focused but with text added inside it, border should be blue as well.

I am trying with .Input:focus, .Input:not(:focus):valid {}, with no result: the rule is triggered when the inut is not focused or with text, I add an example:

.Input {
	border: none;
	outline: none;
}
.Input:focus,
.Input:not(:focus):valid {
	border: 2px solid blue;
}
<input class="Input" type="text" name="EMAIL" id="email" placeholder="email">

Any idea will be welcome!

Upvotes: 3

Views: 4813

Answers (2)

Wild Beard
Wild Beard

Reputation: 2927

:valid works when the content of the input passes all validation rules placed on it. In your case, since it is an email, you can change the type from text to email. Any text entered into the input that doesn't match the default HTML Email pattern won't trigger the :valid pseudo class.

In order for your input to be "invalid" when it is empty you can add required to your input. Since it is defaulted to being empty it will not be valid as it is required.

.Input {
	border: none;
	outline: none;
}
.Input:focus,
.Input:not(:focus):valid {
	border: 2px solid blue;
}
<input class="Input" type="email" required name="EMAIL" id="email" placeholder="email">

Additionally you can use the pattern attribute which accepts a Javascript regex string to validate your input on. For example purposes only you can use a pattern like [a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$. By default the input is empty and is invalid. Same goes for any string that doesn't match [email protected] or [email protected] as examples.

.Input {
	border: none;
	outline: none;
}
.Input:focus,
.Input:not(:focus):valid {
	border: 2px solid blue;
}
<input class="Input" type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" required name="EMAIL" id="email" placeholder="email">

Upvotes: 0

Rees Morris
Rees Morris

Reputation: 158

This should work for you:

.Input[value=""], .Input:placeholder-shown {
    border: none;
    outline: none;
}
.Input, .Input:focus {
  border: 2px solid blue;
}

By default, the input field will always have a blue border. The two selectors above it, however, will determine whether to show the border or not.

If the input field has an empty value, or if the placeholder text is displaying, then the border will be removed and the field will have no decoration. Otherwise, if the input doesn't match any of this criteria, it will have a blue border.

The :focus attribute is used to ensure that the field will have a blue border when it is selected but doesn't contain any text, or when it only contains placeholder text.

Hope this helps!

Upvotes: 1

Related Questions