web前端 在 iOS下 input不能输入 以及获取焦点之后会

2022-03-25  本文已影响0人  我的梦想之路

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 简写属性在一个声明中设置所有的轮廓属性。

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

<!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

auto

auto 的具体取值取决于一系列条件,具体如下:

text

all

contain

element(IE 专有别名)

注意: 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;
}

今天百度推给我一个学习网站(分享给大家一起学习)
https://developer.mozilla.org/zh-CN/docs/Web --- Web 开发技术MDN

上一篇 下一篇

猜你喜欢

热点阅读