CSS 文本字段在 safari 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20495827/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
text field not working in safari
提问by Chip
I'm working on an online eBay profit forecasting calculator here
我正在这里研究在线 eBay 利润预测计算器
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:
我似乎无法让输入字段在 safari 和移动 safari 中工作。它们在 FF 和 Chrome 中运行良好。我点击进入它们，但当我输入时没有任何显示。我一直在搜索谷歌，但似乎找不到任何线索。我想知道我是否在 css 中遗漏了什么。这是我用于输入字段的 css：
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;
}
回答by Turnip
Your problem lies in calcstyle.csshere:
你的问题出在calcstyle.css这里：
* {
-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.
我不完全确定为什么user-select: none;会阻止您输入输入，但删除此块会为我修复它。
EDIT
编辑
Here is a possible solution:
这是一个可能的解决方案：
Select everything butyour inputs...
选择除输入之外的所有内容...
*:not(input.field) {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
回答by Markus
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:
这似乎仍然是 Safari 9.0.3 和 iOS 9.2 的问题。最终为我修复的是将其设置为text：
input, textarea {
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
