用於自動填充小部件的CSS

我想使用jqueryui.com中的自動填充小部件（代碼如下）正如您所看到的，他們正在使用外部樣式表來創建一個良好的樣式。用於自動填充小部件的CSS

如何更改「自動完成框」的樣式？什麼是id或課程？當然，自動完成建議沒有格式化。

<link rel="stylesheet" href="/resources/demos/style.css"> 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
<script> 
$(function() { 
var availableTags = ["test1", "test2", "test3"]; 
$("#tags").autocomplete({ 
    source: availableTags 
}); 
}); 
</script> 
</head> 
<body> 
<div class="ui-widget"> 
<label for="tags">Tags: </label> 
<input id="tags"> 
</div> 
</body> 
</html>

詳細請看這裏：http://jqueryui.com/autocomplete/#default

來源

2017-04-17 Marcel

可以樣式的輸入框，你給它在HTML中的ID或類喜歡的任何方式，或者如果你想奇招自動完成箱，與選擇器

.ui-autocomplete-input { 
    /* Your CSS here */ 
}

的自動完成建議顯示爲輸入下面的列表。它的格式是這樣的：

<ul class="ui-menu ui-autocomplete"> 
    <li class="ui-menu-item">Suggestion 1</li> 
    <li class="ui-menu-item">Suggestion 2</li> 
</ul>

以供將來參考，我極力推薦熟悉瀏覽器的檢查，例如Chrome DevTools或Firefox的Page Inspector。這可以幫助你自己找出HTML和CSS問題。

來源

2017-04-17 15:49:12 polyp

是啊，謝謝！ :) – Marcel

自動填充框使用tags ID，它有一個名爲ui-autocomplete-input的類，所以如果你想修改該元素，你可以在你的CSS中包含類ui-autocomplete-input。

來源

2017-04-17 15:50:26 Manuel

您可以像這樣訪問小部件的不同組件。爲了讓你看到它的存在，我做了一個plunkr。 https://plnkr.co/edit/zMwsXhXtElU7VkvbJSvK?p=preview

訪問標籤：

.ui-widget label{ 
/* styles */ 
}

訪問插件的輸入框中輸入：

.ui-widget input{ 
/* styles */ 
}

訪問插件的列表：

.ui-menu .ui-menu-item{ 
/* styles */ 
}

來源

2017-04-17 16:02:30 lhavCoder

非常感謝你！ – Marcel

用於自動填充小部件的CSS

回答

相關問題