css文本框不弹出键盘 |kccss con

关系图css，css设置图像透明，css如何实现瀑布流，css中怎么声明格式，css3logo颜色效果，css怎样将整个页面缩放，kccss con css文本框不弹出键盘 |kccss con

首先让大家来看一下代码：

<div class="input-wrapper">
<input type="text" placeholder="请输入内容">
</div>

接下来是CSS样式：

.input-wrapper {
width: 100%;
position: relative;
}
input[type="text"] {
width: 100%;
height: 50px;
border: 1px solid #ddd;
padding: 10px;
font-size: 16px;
border-radius: 5px;
-webkit-appearance: none; 
-moz-appearance: none; 
appearance: none;
}

这是一个很常见的文本框样式，但在移动设备上却无法弹出键盘。原因是大家在CSS中使用了appearance属性，这个属性会影响到表单元素的外观，使其看起来像非表单元素一样。当appearance设置成了none，表单元素就不再能弹出键盘。

为了解决这个问题，大家可以不使用appearance属性，而使用其他属性来美化表单元素。比如大家可以使用border-radius来设置圆角，使用box-shadow来设置阴影效果。

改完后的代码如下：

<div class="input-wrapper">
<input type="text" placeholder="请输入内容">
</div>

.input-wrapper {
width: 100%;
position: relative;
}
input[type="text"] {
width: 100%;
height: 50px;
border: none;
border-radius: 5px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
padding: 10px;
font-size: 16px;
}

经过这样的修改，大家就可以在移动设备上正常使用文本框了。