41

I'm working on an online eBay profit forecasting calculator here

I can't seem to get the input fields to work in safari and mobile safari. They work fine in FF & Chrome. I click into them, but nothing shows when I type. I've been searching google but can't seem to find any clues. I'm wondering if I'm missing something in the css. Here's my css for the input fields:

input {
    width: 155px;
    padding-left: 5px;
    height: 24px;
    cursor: text;
    font-size: 18px;
    font-weight: bold;
    border: none;
    border-radius: 3px;
    box-shadow: inset 1px 1px 2px black;
    -moz-box-shadow: inset 1px 1px 2px black;
    -webkit-box-shadow: inset 1px 1px 2px black;
    background-color: #F8FBEF;
 }
Eliezer Bernart
  • 2,386
  • 24
  • 33
Chip
  • 633
  • 2
  • 6
  • 14

2 Answers2

75

Your problem lies in calcstyle.css here:

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

I'm not entirely sure why user-select: none; would prevent you from typing into an input but removing this block fixes it for me.

EDIT

Here is a possible solution:

Select everything but your inputs...

*:not(input.field) {    
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
Turnip
  • 35,836
  • 15
  • 89
  • 111
  • excellent, this solved my problem with a search field in a sencha touch application where the field would not turn active in safari. – Etienne678 Apr 03 '14 at 11:00
  • 3
    Just setting the input to `...-user-select: text` would be another alternative (to ensure the input works with any global css settings). – Sir Hackalot Jul 11 '15 at 16:09
  • Oh my Gosh... 2 days spent on this... thank you very much!! – Giovanne Afonso Jun 25 '19 at 23:10
  • The solution is best for what I need: using this to stop dragging mouse to select items on the screen. Changing from "none" to "text" allows selecting items with the mouse. – Raymond Naseef May 28 '20 at 05:55
26

This still seems to be a problem with Safari 9.0.3 and iOS 9.2. What finally fixed it for me was to set it to text:

input, textarea {
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
Markus
  • 2,412
  • 29
  • 28