Question

我尝试使用表单详细信息，我有Text-Fields像这样创建

 <div  data-role="fieldcontain" class="name">
<label for="email"> <font color="white">No of lights</font> </label>&nbsp;&nbsp;&nbsp;
<input class="one" type="text" style="background-color:#686868" name="Name" />


 </div>

它显示像这样

但我希望这样 enter image description here

所以我可以申请

.one{
border-left:none;
border-top:none;
border-right:none;

}

但它不起作用我的代码是

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> 
</head>
<style>
.one{
border-left:none;
border-top:none;
border-right:none;
}
#pageone{

background-color:#666666;
}
</style>
<body>
<div data-role="page" id="pageone" data-theme="a" >
 <div  data-role="fieldcontain" class="name">
<label for="email"> <font color="white">No of lights</font> </label>&nbsp;&nbsp;&nbsp;
<input class="one" type="text" style="background-color:#686868" name="Name" />
</div>

 </div>


</body>
</html>

请告诉我有关如何删除文本字段边框的任何想法请告诉我我们的代码有哪些变化

Answer 1

input.one{
background-color: transparent; 
border-style: solid; 
border-width: 0px 0px 1px 0px; 
border-color: white;
}

Answer 2

input{
    border: none;
    border-bottom: 2px solid white;
    outline: none;
}

添加轮廓，以便在选择文本框时，轮廓边框不会显示。

Answer 3

在phonegap输入标记中包含div标记。例如：

<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
  <input name="phone" id="phone" placeholder="" type="text">
</div>

所以你可以改变类＆＃34; ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset＆＃34;并可以删除边框。

如何删除phoneGap中的文本字段边框

3 个答案: