我尝试使用用户表单详细信息,我创建了像这样的文本字段

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


它显示像这样


但是我想要这样

所以我可以像

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


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

最佳答案

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

09-10 11:16
查看更多