web前端在 iOS下 input不能输入以及获取焦点之后会出现蓝色的border轮廓

iOS下 input 不能获取焦点获取焦点后：设置border：none无效果

  .hb_content input{
      display: inline-block;
      margin-left: 0.225rem;
      height: 1rem;
      border: none !important;
      outline: none; /** 控制iOS获取焦点后的轮廓 */ 
      color: #000000;
      font-size: 100%;
      width: 50%;
      -webkit-user-select: auto !important; /**不能获取焦点*/
    }

名词解释：outline

outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
注释：轮廓线不会占据空间，也不一定是矩形。

outline 简写属性在一个声明中设置所有的轮廓属性。

可以按顺序设置如下属性：

outline-color
outline-style
outline-width
如果不设置其中的某个值，也不会出问题，比如 outline:solid #ff0000; 也是允许的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
p 
{
border:red solid thin;
outline:#00ff00 dotted thick;
}
</style>
</head>

<body>
<p><b>注释：</b>只有在规定了 !DOCTYPE 时，Internet Explorer 8 （以及更高版本） 才支持 outline 属性。</p>
</body>
</html>

名词解释 user-select

CSS 属性 user-select 控制用户能否选中文本

/* Keyword values */
user-select: none;
user-select: auto;
user-select: text;
user-select: contain;
user-select: all;

/* Global values */
user-select: inherit;
user-select: initial;
user-select: unset;

/* Mozilla-specific values */
-moz-user-select: none;
-moz-user-select: text;
-moz-user-select: all;

/* WebKit-specific values */
-webkit-user-select: none;
-webkit-user-select: text;
-webkit-user-select: all; /* Doesn't work in Safari; use only
                             "none" or "text", or else it will
                             allow typing in the <html> container */

/* Microsoft-specific values */
-ms-user-select: none;
-ms-user-select: text;
-ms-user-select: element;

语法

none

元素及其子元素的文本不可选中。请注意这个Selection 对象可以包含这些元素。从Firefox 21开始， none 表现的像 -moz-none，因此可以使用 -moz-user-select: text 在子元素上重新启用选择。

auto

auto 的具体取值取决于一系列条件，具体如下：

在 ::before 和 ::after 伪元素上，采用的属性值是 none
如果元素是可编辑元素，则采用的属性值是 contain
否则，如果此元素的父元素的 user-select 采用的属性值为 all，则该元素采用的属性值也为 all
否则，如果此元素的父元素的 user-select 采用的属性值为 none，则该元素采用的属性值也为 none
否则，采用的属性值为 text

text

用户可以选择文本。

all

在一个HTML编辑器中，当双击子元素或者上下文时，那么包含该子元素的最顶层元素也会被选中。

contain

允许在元素内选择；但是，选区将被限制在该元素的边界之内。

element（IE 专有别名）

与 contain 相同，但仅在 Internet Explorer 中受支持。

注意： CSS UI 4 已将 user-select 的 element 属性值重命名为 contain

test

<p>你应该可以选中这段文本。</p>
<p class="unselectable">嘿嘿，你不能选中这段文本！</p>
<p class="all">点击一次就会选中这段文本。</p>


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

.all {
  -moz-user-select: all;
  -webkit-user-select: all;
  -ms-user-select: all;
  user-select: all;
}

posted on 2022-03-25 15:12 depressiom 阅读(98) 评论(0) 编辑收藏举报

刷新页面返回顶部

iOS下 input 不能获取焦点 获取焦点后：设置border：none无效果

名词解释：outline

名词解释 user-select

语法

none

auto

text

all

contain

element（IE 专有别名）

注意： CSS UI 4 已将 user-select 的 element 属性值重命名为 contain

test

iOS下 input 不能获取焦点获取焦点后：设置border：none无效果