css - 如何自定义 Blogger 中的下拉存档小部件？

Question

我需要一些有关自定义存档小部件的帮助。我试过搜索引擎寻找任何教程，但无济于事。

关于 my tester blog我已经安装了默认的下拉存档小部件。我绝对不喜欢它的外观，我试图改变它的各种元素，例如字体、字母间距、颜色、边框等，但我一无所获。

关于如何自定义层次结构和平面存档小部件的教程数不胜数，但没有关于下拉菜单选项的教程。我之前被告知可以将相同的编码应用于任一存档小部件选项，但我发现这不起作用。

我用来自定义小部件的代码如下所述。我只是在标签之间添加了这个编码:

#BlogArchive1 ul li { 
    text-transform: uppercase; 
    text-align: center; 
    font-size: 16px; 
    letter-spacing: 0.08em; 
    font-weight: normal !important; 
    color: #171717; 
    border: 0; 
    width: 90%; 
    outline: none; 
    text-align: center; 
    background-color: #fffffff;
}
#BlogArchive1 a { 
    color: #171717 !important; 
    font-weight: normal !important;
} 

我尝试创建的外观非常简单，没有边框和清晰的白色背景。

Answer 1

其实很简单。您只需使用以下代码即可进一步自定义:

#BlogArchive1 ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#BlogArchive1 ul li {
    float: left;
}
#BlogArchive1 ul li a { 
    text-transform: uppercase; 
    text-align: center; 
    font-size: 16px; 
    letter-spacing: 0.08em; 
    font-weight: normal !important; 
    color: #171717; 
    border: 0; 
    width: 90%; 
    outline: none;
    display: block;
    padding: 8px 15px;
    text-align: center; 
    text-decoration: none;
    background-color: #fffffff; 
}
#BlogArchive1 ul li a { 
    color: #171717
}
#BlogArchive1 ul li a:focus { 
    color: #333;
}