Cannot write into input field on safari

Question

I have an input field that cannot be selected on my Iphone. I can click on the input but it is not focusing. The keyboard to write appears but when I write something into it nothing happens. Therefore I cannot fill out the input fields. Is something missing in my CSS?

<div class="container" v-if="user === null">
        <div class="input">
            <input type="text" v-model="username" placeholder="E-Mail">
        </div>
        <div class="input">
            <input type="password" @keyup.enter="authenticate" v-model="password" placeholder="Passwort">
        </div>
        <div class="buttons">
            <button @click="authenticate">Log In</button>
        </div>
    </div>

Answer 1

I was an error on my site. The template I was using had a style.css with the following rules

* {
  user-select: none;
  -khtml-user-select: none;
  -o-user-select: none;
  -moz-user-select: -moz-none;
  -webkit-user-select: none;
}

I had to add the following for safari:

input, input:before, input:after {
  -webkit-user-select: initial;
  -khtml-user-select: initial;
  -moz-user-select: initial;
  -ms-user-select: initial;
  user-select: initial;
}

Answer 2

Try to put your input nested in a form. This is better for validations and accessibility, and that might fix your issue as well.

Your login button should also be of the submit type. See that link: https://www.w3schools.com/html/html_forms.asp