Why does my input not work on mobile?

Question

I am building a simple guessing game for a class I am taking, and I built it with Bootstrap and custom CSS and JavaScript. However, when I went to the webpage that is hosting the project on my iPhone 6S running iOS 9.2.1, the input where the user places their guess does not accept an argument. On desktop, the input works perfectly, and all of the other buttons work as expected on both desktop and mobile. Why might my input not work on my iPhone?

<input class="btn btn-default btn-lg input" type="text" id="guess" placeholder="Pick a number between 1-100">

My guessing game link

Screenshot: The input doesn't accept anything I try to type

UPDATE: I found a question similar to mine at this link . However, after going through the Bootstrap CSS and deleting the elements the question deemed would solve my problem, the problem remains.

Answer 1

I had the same problem and after looking at Bootstrap "btn" styles I figured out that this style is breaking my input:

.btn {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

So I changed it to:

input.btn {
  -webkit-user-select: initial;
  -khtml-user-select: initial;
  -moz-user-select: initial;
  -ms-user-select: initial;
  user-select: initial;
}