多個文本字段時自動完成用戶界面的CSS問題

我很難在CSS中修復問題。在一開始，我創建了一個頁面，其中包含一個帶有自動完成功能的文本輸入表單。我調整了我的CSS文件來獲得我想要的渲染。多個文本字段時自動完成用戶界面的CSS問題

稍後，我不得不將新的文本字段添加到同一頁面。他們與第一個沒有關係（所以我在同一頁中有兩個表格）。

問題是，因爲我添加了這些新的文本字段的UI變得搞砸了。我認爲這個問題是由一個糟糕的css屬性造成的。讓我告訴你CSS文件，然後是HTML代碼。

CSS文件

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

來源

2014-01-26 SHaDoW

你能給我們提供一些關於「越來越混亂」的含義嗎？ – TimSPQR

這就好像自動搜索沒有顯示任何結果，或者它只顯示1個沒有圖形界面的結果（如CSS文件中定義的那樣）。我準備了一張照片，但因爲我很新，顯然我需要提高我的聲望才能夠張貼照片呵呵。對不起，:) :) – SHaDoW

好吧......如果問題出在自動完成下拉列表中，我會獲得所有格式的設置並從頭開始。使用您需要查看列表的最小數量，然後逐個添加格式。 – TimSPQR

我解決了我的問題，通過刪除對jquery.js文件的引用。

感謝您的幫助！

來源

2014-01-30 01:33:52 SHaDoW

多個文本字段時自動完成用戶界面的CSS問題

回答

相關問題