我尝试使用用户表单详细信息,我创建了像这样的文本字段
<div data-role="fieldcontain" class="name">
<label for="email"> <font color="white">No of lights</font> </label>
<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>
<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;
}