Question

我很难解决CSS中的问题。在一开始，我创建了一个带有一个文本输入表单的页面，其中包含自动完成功能。我调整了我的CSS文件以获得我想要的渲染。

稍后，我不得不在同一页面中添加新的文本字段。它们与第一个没有关系（因此我在同一页面中有两个表格）。

问题在于，由于我添加了这些新文本字段，因此UI变得混乱。我认为这个问题是由一个糟糕的css属性引起的。让我向您展示CSS文件，然后是html代码。

CSS FILE

#dynamicsearch {

}

.ui-dynamicsearch {
  z-index: 10000000;
}

#dynamicsearch input[type="text"] {
    background: url(../images/search-dark.png) no-repeat 10px 6px #1B1B1B;
    border: 1px solid #000000;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 0 rgba(0, 0, 0, 0.5) inset;
    color: #FFFFFF;
    float: left;
    font-size: 11px;
    height: 26px;
    padding-left: 35px;
    padding-right: 65px;
    text-shadow: 0 0 3px #FFFFFF;
    width: 110px;
    margin-left: 50px;
    margin-top: 6px;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
}

#dynamicsearch input[type="text"]:hover, dynamicsearch input[type="text"]:active{
    width: 160px;
}

.ui-autocomplete {
    background-color:rgba(119,119,119,0.5);
    border-radius: 0px;
    width: 200px;
    border: 1 none;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    padding: 6px 15px 6px 35px;
    list-style-type: none;
    position: absolute;
}
.ui-autocomplete.source:hover {
    background: #777;
    width: 210px;
}

.ui-menu .ui-menu-item a{
    text-decoration: none;
    height:14px;
    font: bold 12px Arial,Helvetica,Sans-serif;
    background: url(../images/folder-dark.png) no-repeat;
    padding-left: 30px;
    display: block;
}

这是调用自动填充和其他文本字段的页面。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
    <title>ASD</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>    
<script type="text/javascript">
$(function() {
    //autocomplete
    $(".auto").autocomplete({
        source: "db/search.php",
        minLength: 1,
        messages: {
        noResults: '',
        results: function() {}
    }
    });             
});
</script>
<script src="db/jquery.js" type="text/javascript"></script>
</head>
<body>

<section id="menu">
    <form action="voir.php" method="post" id="dynamicsearch">
        <input type="text" class='auto' name="dynamicsearch" id="dynamicsearch"/>
        <input type="submit" value="Submit" style="display:none" />
    </form>
</section>

<article id="state">
    <form method="post" action="db/requete.php">
        <input type="text" name="name" />
        <textarea name="probleme" id="textarea" cols="90" rows="5">Enter Text Here</textarea>
    </form>
</article>
</body>
</html>

Answer 1

我通过删除对jquery.js文件的引用解决了我的问题。

感谢您的帮助！

多个文本字段时自动完成的用户界面的CSS问题

1 个答案: