0

HTML:

<form method="post" action="#" autocomplete="off" id="validform">
                <div class="form-group col-sm-6">


                    <input type="text" class="form-control" id="name" required>
                    <span class="underline"></span>
                    <label for="name">Your name</label>

                </div>
                <div class="form-group col-sm-6">


                    <input type="email" class="form-control" id="email" required>
                    <span class="underline"></span>
                    <label for="email">Email</label>

CSS:

input:focus ~ label,
input:valid ~ label,
textarea:focus ~ label,
textarea:valid ~ label
{
    font-size: .8em;

    top: -20px;

    color: #24cf88;
}

So basically label shifts on top of an input tag whenever you focus on input tag or if it is valid . it works fine with text input , but with an email input it shifts back to the bottom unless you type the correct email format. How can i keep the text shifted to the top after i type something in an email input ?? i've included the link to the website if you'd like to check how it works.

https://baziiner21.github.io

SK_Baz
  • 33
  • 5
  • Possible duplicate of [Detect if an input has text in it using CSS -- on a page I am visiting and do not control?](https://stackoverflow.com/questions/16952526/detect-if-an-input-has-text-in-it-using-css-on-a-page-i-am-visiting-and-do-no) – Salketer Aug 03 '18 at 09:34
  • Did you find the answer you were looking for? – Royal Wares Oct 19 '18 at 14:27

3 Answers3

1

Try to remove the type=email from the input and add your own validation with javascript

عبدالرحمان
  • 447
  • 2
  • 8
  • Rather than removing the `type=email`, I'd use JavaScript to detect if the input is filled instead to keep the semantics intact. I'd also use JavaScript validation anyway as the browsers don't all get it right. – Matt Aug 03 '18 at 09:41
0

It's because you're using the :valid selector. You could always use the following:

input:invalid ~ label {
    font-size: .8em;
    top: -20px;
    color: #cf2424;
}

/* Extra for colouring the line based on invalid input */
input:invalid + span::after, input:invalid + span::before {
    background: #cf2424;
}

The above code would sit alongside your existing code

Kieran McClung
  • 714
  • 1
  • 7
  • 16
0
pattern="."

Just add that to your email field, it will change what is considered valid to by any character entered, then your valid/invalid css styling will work.

Edit: This will require you to use novalidate on your form to prevent the browser complaining about an invalid email format.

Royal Wares
  • 1,192
  • 10
  • 23