相关疑难解决方法(0)
显示datalist标签,但提交实际值
目前<datalist>大多数主流浏览器(Safari除外)都支持HTML5 元素,这似乎是一种向输入添加建议的有趣方式.
但是,value属性的实现与内部文本之间似乎存在一些差异<option>.例如:
<input list="answers" name="answer">
<datalist id="answers">
<option value="42">The answer</option>
</datalist>
不同浏览器的处理方式不同:
Chrome和Opera:
FireFox和IE 11:
选择一个后,输入将填充值而不是内部文本.我只希望用户在下拉列表和输入中看到文本("答案"),但是将值传递给42提交,就像一个select遗嘱.
如何让所有浏览器都有下拉列表显示<option>s 的标签(内部文本),但在value提交表单时发送属性？
推荐指数
解决办法
查看次数
删除Chrome中的Datalist下拉箭头
Chrome显然在文本输入中添加了一个下拉箭头,引用了一个<datalist>.它出现在Chrome 34(Canary)中,但不是当前的稳定版本(Chrome 31).
它仅在文本字段被聚焦时显示(请参阅更新)并应用于两种输入类型text和search.
就本机浏览器实现而言,它可能会更糟,但正如您在图像中看到的那样,它与我的设计规范相冲突.
有谁知道如何删除或替换这个新功能？
<datalist id="list"><option value="foo"><option value="bar"></datalist>
<input type="text" list="list" name="field" maxlength="50" autocomplete="off" spellcheck="off" placeholder="Jump To">
更新:
当字段悬停(不仅仅是聚焦)时,箭头也会出现,不幸的是,当按钮本身悬停时,它也有自己的背景颜色:
推荐指数
解决办法
查看次数
使用HTML5 <datalist>时是否可以设置下拉建议的样式？
看到这里:http://jsfiddle.net/zemar (必须使用Firefox或Opera查看)
当您单击时select,下拉列表的样式将匹配,但如果您开始在文本框中的数据列表中键入一个术语,则显示的建议不会设置样式,因此它与其余部分不匹配造型.
是否可以设置下拉菜单的样式？
* {margin:0; padding:0; font-family: arial, sans-serif; font-size: 40px; font-weight: bold; color: #444;}
body {height:100%; background:#F4F3EF;}
.select select, .input input {background: transparent; width: 220px; overflow:hidden; height: 65px; padding-left: 5px;
padding-bottom: 5px; -webkit-appearance: none; -moz-appearance:none; appearance:none; border:none; cursor:pointer;}
.select select {padding-top: 5px;}
.select, .input {float:left; width: 220px; height: 65px; margin-right: 20px; overflow: hidden; background: #ddd;
border: 1px solid #ccc;} <div class="select">
<select id="count">
<option value="1">A</option>
<option value="2">A pair of</option>
<option value="3">A few</option>
<option …推荐指数
解决办法
查看次数
HTML5中Datalist的滚动条
我有麻烦datalist在HTML5中,我有10000行,以显示我的option价值,我从MySQL使用PHP填充,由于某种原因,我看不到任何滚动条,我试图overflow:scroll设置height和width,但没有帮助.请帮我!
<div class="container">
<form action="NutritionDataBank.php" method="post">
<label>Select NDBNum:</label>
<input list="ndbnum" id="ndb" placeholder="e.g.1001" size="20" multiple>
<datalist id="ndbnum">
<?php
//...
while($row = mysqli_fetch_array($result)){
echo "<option value=$row[ndbNum]></option>";
}
?>
</datalist>
</form>
</div>
推荐指数
解决办法
查看次数
为数据列表中的选项提供固定长度
我有这个HTML代码:
<style type="text/css">
.select {
white-space:pre-wrap;
background-color:#FF9;
width: 500px;
}
</style>
<input type="text" list="browsers" class="select"/>
<datalist id=browsers >
<?php while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)) {;?>
<option>
<?php echo $row_Recordset1['RBC']; }?>
</option>
</datalist>
我有一些数据超过500px,所以当我点击文本框时,列表宽度大于文本框宽度(500px)
如何修复列表宽度？
推荐指数
解决办法
查看次数
当 px 大于 600px 时，datalist 选项宽度小于输入宽度。如何在 chrome 上动态修复它
大家好我正在使用flask WTForm表单控件类作为宽度，但不确定如何在snipet中做到这一点，所以我对宽度进行了硬编码。
我面临的问题是输入真的很长，但下拉选项与输入宽度不匹配。当您运行代码段时，您可以看到下拉菜单是输入宽度的 1/10。我尝试给选项和数据列表相同的宽度，但没有任何效果。
我将如何使 chrome 上的选项下拉菜单与我的输入具有相同的宽度，谢谢
<input class="form-control" type="text" id="color" style = "width:800px" list="colors_data">
<datalist id="colors_data"class="form-control"style = "width:800px">
<option style = "width:800px"value="red"></option>
<option style = "width:800px"value="orange"></option>
<option style = "width:800px"value="green"></option>
<option style = "width:800px"value="blue">The color of the sky</option>
</datalist>编辑：将大小更改为 800px 我尝试通过此链接创建我自己的数据列表，但我面临同样的问题 Creating a HTML5 datalist on the fly
我附上了一张图片以更清楚地显示问题。如您所见，下拉选项比输入本身小得多。我该如何解决这个问题谢谢
推荐指数
解决办法
查看次数
我想知道如何在数据列表项上应用CSS。我想更改高度和字体大小
我想知道我在表单中应用了数据列表的一件事。但我想增加他们的项目字体大小，并想在其上添加 CSS，如填充。
<!DOCTYPE html>
<html>
<style>
#banner .seach-main-con .text-box{width:100%; height:45px; border-radius:5px; margin:3px 0; background-color:#fff; font-size:15px;}
#banner .seach-main-con option{padding:5px; font-size:15px;}
#banner .seach-main-con .search-btn{width:100%; height:50px; border-radius:5px; margin:15px 0; background-color:#d83318; color:#fff; font-size:20px; border:0;}
#banner .seach-main-con .dropdown-text{width:100%; height:45px; border-radius:5px; margin:3px 0; background-color:#fff; font-size:15px;}
#banner .seach-main-con datalist{padding:5px; font-size:15px;}
#banner .seach-main-con .datalist-option{width:100%; padding:5px; font-size:15px; background-color:#fff;}
</style>
<body>
<form>
<h3>Keyword Search form Here</h3>
<div class="height"></div>
<input list="browsers" name="browser" class="text-box">
<datalist id="browsers">
<option value="Delhi">
<option value="Haridawar">
<option value="Shirdi">
<option value="Bombay">
<option value="France">
</datalist>
</form>
<p><strong>Note:</strong> The datalist tag …推荐指数
解决办法
查看次数
将CSS放入<datalist>
所以现在我有一个简单的datalist下拉菜单，我想更改它的CSS，以便样式与网站上的其他字段匹配。但是我是一个网页设计的菜鸟，我有点困惑，以完成此过程。
请参阅：http : //jsfiddle.net/ryax5L29/20/
<input list="ServiceCity">
<datalist id="ServiceCity" name="ServiceCity"class = "atl_services">
<option value "" disabled selected>Select City/County</option>
.......other values
</datalist>
这是我要使用的CSS
input{
padding: 7px;
outline: none;
max-width: 100%;
margin-bottom: 5px;
border-width: 1px;
border-style: solid;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px
width: 88.5%;
border: 1px solid GREY;
box-shadow: 0px 0px 3px GREY;
}
我也有CSS，imo内联CSS是最容易的，但是如果有人可以指导我，那将非常感谢！
推荐指数
解决办法
查看次数