フォームにオートコンプリート入力がありますが、ドロップダウン リストのスタイルが正しく設定されていません。ハイパーリンクの通常の箇条書きリストのように表示されます。
これは、オートコンプリートが作成するレンダリングされた隠しリストです。
<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all" id="ui-id-1" tabindex="0" style="display: none; top: 253px; left: 20px; width: 162px;">
<li class="ui-menu-item" role="presentation">
<a id="ui-id-10" class="ui-corner-all" tabindex="-1">Austria</a>
</li>
<li class="ui-menu-item" role="presentation">
<a id="ui-id-11" class="ui-corner-all" tabindex="-1">Australia</a>
</li>
<li class="ui-menu-item" role="presentation">
<a id="ui-id-12" class="ui-corner-all" tabindex="-1">Aust-Timor</a>
</li>
<li class="ui-menu-item" role="presentation">
<a id="ui-id-13" class="ui-corner-all" tabindex="-1">Austur-Kongo</a>
</li>
</ul>
したがって、すべての適切なスタイル クラスがあるように見えますが、Chrome で CSS を見ると、いくつかのクラスが適用されていません。つまり、ui-menuです。
element.style {
display: none;
top: 253px;
left: 20px;
width: 162px;
}
Matched CSS Rules
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
border-bottom-right-radius: 4px/*{cornerRadius}*/;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
border-bottom-left-radius: 4px/*{cornerRadius}*/;
}
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
border-top-right-radius: 4px/*{cornerRadius}*/;
}
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
border-top-left-radius: 4px/*{cornerRadius}*/;
}
.ui-widget-content {
border: 1px solid #aaaaaa/*{borderColorContent}*/;
background: #ffffff/*{bgColorContent}*/ url(images/ui-bg_flat_75_ffffff_40x100.png)/*{bgImgUrlContent}*/ 50%/*{bgContentXPos}*/ 50%/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/;
color: #222222/*{fcContent}*/;
}
.ui-widget {
font-family: Verdana,Arial,sans-serif/*{ffDefault}*/;
font-size: 1.1em/*{fsDefault}*/;
}
.ui-autocomplete {
position: absolute;
top: 0;
left: 0;
cursor: default;
}
.ui-front {
z-index: 100;
}
user agent stylesheetul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
Inherited from body
body {
color: #333;
font-size: .85em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
}
一部のスタイル クラスが適用されない理由を調べるにはどうすればよいですか?