CSS :focus applying style even if I haven't interacted - css

Question

I'm using the :focus property on an input so that when I click on it an effect occurs. However, even when I don't click on it, all the inputs have had the style contained within :focus applied as soon as I load the page.
.input-container {
position: relative;
}
.form {
background-color: white;
font-size: 16px;
overflow: hidden;
color: black;
border-radius: 10px;
width: 100%;
position: relative;
height: 100%;
padding-left: 7rem;
padding-right: 7rem;
padding-top: 5rem;
}
.form input {
outline: none;
position: relative;
margin: 0 auto;
width: 100%;
color: #595f6e;
padding-top: 30px;
border: none;
}
.form input:focus+.label-name .content-name,
.form input:valid+.label-name .content-name {
transform: translateY(-150%);
color: blue;
font-size: 14px;
}
.form input:focus+.label-name::after,
.form input:valid+.label-name::after {
transform: translateX(0%);
}
.form label {
position: absolute;
pointer-events: none;
bottom: 0px;
left: 0px;
width: 100%;
border-bottom: 2px solid black;
}
.form label::after {
content: "";
position: absolute;
left: 0px;
height: 100%;
width: 100%;
border-bottom: 3px solid blue;
transform: translateX(-100%);
transition: transform 0.3s ease;
}
.content-name {
position: absolute;
bottom: 5px;
left: 0px;
transition: all 0.3 ease;
}
<div class="form">
<div class="input-container u-margin-bottom-medium">
<input type="text" name="name" autocomplete="off">
<label for="name" class="label-name">
<span class="content-name">Name</span>
</label>
</div>
<div class="input-container u-margin-bottom-medium">
<input type="text" name="name" autocomplete="off">
<label for="name" class="label-name">
<span class="content-name">Email</span>
</label>
</div>
<div class="input-container u-margin-bottom-medium">
<input type="text" name="name" autocomplete="off">
<label for="name" class="label-name">
<span class="content-name">Message</span>
</label>
</div>
</div>
Does anyone know why this might be happening? Any help or suggestions are appreciated!

Answer 1

Since you need to test if there is text in the input, but want to wait until it's "valid" (this does not check to see if the actual data is valid, but rather that there is text). You can set the required attribute on the input fields. Technically, if there is no text in the input field, the field isn't "valid" until there is.
.input-container {
position: relative;
}
.form {
background-color: white;
font-size: 16px;
overflow: hidden;
color: black;
border-radius: 10px;
width: 100%;
position: relative;
height: 100%;
padding-left: 7rem;
padding-right: 7rem;
padding-top: 5rem;
}
.form input {
outline: none;
position: relative;
margin: 0 auto;
width: 100%;
color: #595f6e;
padding-top: 30px;
border: none;
}
.form input:focus+.label-name .content-name,
.form input:valid+.label-name .content-name {
transform: translateY(-150%);
color: blue;
font-size: 14px;
}
.form input:focus+.label-name::after,
.form input:valid+.label-name::after {
transform: translateX(0%);
}
.form label {
position: absolute;
pointer-events: none;
bottom: 0px;
left: 0px;
width: 100%;
border-bottom: 2px solid black;
}
.form label::after {
content: "";
position: absolute;
left: 0px;
height: 100%;
width: 100%;
border-bottom: 3px solid blue;
transform: translateX(-100%);
transition: transform 0.3s ease;
}
.content-name {
position: absolute;
bottom: 5px;
left: 0px;
transition: all 0.3 ease;
}
<div class="form">
<div class="input-container u-margin-bottom-medium">
<input type="text" name="name" autocomplete="off" required>
<label for="name" class="label-name">
<span class="content-name">Name</span>
</label>
</div>
<div class="input-container u-margin-bottom-medium">
<input type="text" name="name" autocomplete="off" required>
<label for="name" class="label-name">
<span class="content-name">Email</span>
</label>
</div>
<div class="input-container u-margin-bottom-medium">
<input type="text" name="name" autocomplete="off" required>
<label for="name" class="label-name">
<span class="content-name">Message</span>
</label>
</div>
</div>