gtag

2011年1月13日 星期四

如何修改Ajax Tool Kit 中 AutoCompleteExtender 彈跳框的字型大小

使用Ajax Tool Kit的Autocomplete Extender可以利用下列方式更改彈跳頁框的字型大小。

<style type="text/css">
#AutoCompleteExtender1_completionListElem ul,li{font-size: 10pt;}
</style>

粗體字的部份換成您所使用Autocomplete Extender控制項的ID。

也可以利用下列CSS語法來設定不同的彈跳頁框樣式:

        /*AutoComplete flyout */.autocomplete_completionListElement
        {
            /*visibility: hidden;*/
            margin: 0px !important;
            background-color: inherit;
            color: windowtext;
            border: buttonshadow;
            border-width: 1px;
            border-style: solid;
            cursor: pointer;
            overflow: auto;
            height: 200px;
            text-align: left;
            list-style-type: none;
            font-size: 10pt;
        }
        /* AutoComplete highlighted item */.autocomplete_highlightedListItem
        {
            background-color: #ffff99;
            color: black;
            padding: 1px;
            cursor: pointer;
        }
        /* AutoComplete item */.autocomplete_listItem
        {
            background-color: window;
            color: windowtext;
            padding: 1px;
            cursor: pointer;
        }
        ul,li
        {
            margin: 0;
            padding: 0;
            border: none;
            cursor: pointer;
        }

並加入下列控制項參數:


        CompletionListCssClass="autocomplete_completionListElement"
        CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"
        CompletionListItemCssClass="autocomplete_listItem"

沒有留言:

張貼留言