在网站建设过程中,我们经常会遇到Div漂浮层无法覆盖select下拉框,而总是被其遮盖的情况,让网站浏览者的用户体验大打折扣。再就是无法改变select下拉框的背景效果,让网页设计总是留下缺憾。如此网站缺憾,在某种程度上是网站设计的败笔,这样的网站是很难让登录者理解和接受的,他们有可能再不会发生第二次登录。今天我们就来与大家分享一下,如何解决select无法被遮盖及无法改变背景的问题,让网页设计更加出色!
首页我们要用到htc文件动态脚本修复,然后仅使用几行简单的CSS即可解决问题。
以下为示例代码:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>select</title>
<style type="text/css">
select {border: 1px solid #ccc;background: none;padding: 4px 5px;outline:none;color:#333;*behavior: url(select.htc);select:focus {border-color: #79c0f2;}
</style>
</head>
<body>
<select>
<option>select</option>
</select>
</body>
</html>