text field not working in safari

css safari vendor-prefix

34,752

Solution 1

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;
}

Solution 2

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;
}

34,752

Author by

Chip

Updated on July 09, 2022

Comments

Chip almost 2 years
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;
 }
```
Etienne678 about 10 years

excellent, this solved my problem with a search field in a sencha touch application where the field would not turn active in safari.
Sir Hackalot almost 9 years

Just setting the input to ...-user-select: text would be another alternative (to ensure the input works with any global css settings).
Giovanne Afonso almost 5 years

Oh my Gosh... 2 days spent on this... thank you very much!!
Raymond Naseef almost 4 years

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.