输入字段不必要的属性正在IOS设备中

Question

我们正在使用dojo 1.10.3开发混合移动应用程序。

所有设备文本字段即将到来UI除了iPhone环境文本字段内部顶部不需要的属性（黑色边框和阴影）即将到来之外是好的。

在那个输入字段中，我们无法找到它的确切属性

我们正在获取一些输入字段并添加如下

之类的css属性

.textbox{
    margin: 0px auto 0px auto;
	font-size: 12px;
	font-weight: bold;
	text-indent: 10px;
	color: rgba(23, 82, 117, 1.0);
	display: block;
	width: 85%;
	height: 34px;
	border: 1px solid rgba(204, 204, 204, 1.0);
	border-radius: 0px;
	background-color: white !important;
	outline: none !important;
	-webkit-box-shadow: inset 0px 0px 0px 0px transparent;
	-moz-box-shadow: inset 0px 0px 0px 0px transparent;
	box-shadow: inset 0px 0px 0px 0px transparent;
  }

<input data-dojo-type="dojox.mobile.TextBox"  class="textbox">

<input data-dojo-type="dojox.mobile.TextBox"  class="textbox">

<input data-dojo-type="dojox.mobile.TextBox"  class="textbox">

和iphone.css中的textfeild默认css代码如下所示

.mblTextBox {
  height: 22px;
  border-width: 1px;
  border-style: inset;
  font-family: Helvetica;
  font-size: 13px;
  border-color: #9cacc0;
  border-radius: 5px;
}

我正在附加屏幕截图请发现我的问题很容易理解

我们想要这样

enter image description here

下面的实际问题

enter image description here

Answer 1

尝试将-webkit-appearance: none;添加到CSS中的所有输入元素。

以下输入在所有浏览器（包括移动版Safari）上显示相同

＆＃13;

＆＃13;

input[type=text] {
  -webkit-appearance: none;
  border: 1px solid black;
  border-radius: 0px;
  outline: none;
  width: 200px;
  margin: 0px;
  padding: 4px;
}

＆＃13;

<input type="text" />

＆＃13;

＆＃13;

＆＃13;

修改 您似乎也可以通过以下方式解决问题：https://davidwalsh.name/input-shadows-ipad

编辑2： 我已经多次尝试过以下示例，它应该可以正常工作。如果没有，您可以使用一些可能覆盖示例中的一个（或多个）规则的CSS规则。

iPhone模拟器上的结果：

＆＃13;

＆＃13;

ul.examples {
  list-style: none;
  padding: 0px;
  font-family: Arial;
}
.textbox {
  margin: 5px 0px 10px 0px;
  display: block;
  width: 100%;
  border: 1px solid rgba(204, 204, 204, 1.0);
  border-radius: 0px;
  outline: none !important;
}
.example:last-child .textbox {
  -webkit-appearance: none;
  color: red;
}

＆＃13;

<ul class="examples">
  <li class="example">Your example:
    <br/>
    <input data-dojo-type="dojox.mobile.TextBox" class="textbox">
  </li>
  <li class="example">My example:
    <br/>
    <input data-dojo-type="dojox.mobile.TextBox" class="textbox">
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;