利用CSS实现酷炫的下拉框特效

上面我们用到了 Terminal 字体，而且接下来我们还会使用 Lobster 字体，所以用这行代码添加引用。

1、指定 headng, select 宽度并指定其水平居中。

2、修改 heading 的宽度，主要是为了让其宽度大于 select 的宽度，显得更加美观。然后指定其上外边距和下外边距。

3、设置 heading 下 h2 元素的字体和字体大小，颜色。

CSS Code复制内容到剪贴板

.select > p, .select ul {   
        background-color: #ffffff;   
        font-size: 2rem;   
        border: 1px solid bisque;   
        border-radius: 5px;   
        margin-bottom: 0;   
    }   
  
.select > p {   
        text-align: left;   
        padding: 1rem;   
        position: relative;   
        border-bottom-rightright-radius: 0;   
        border-bottom-left-radius: 0;   
        cursor: pointer;   
        color: rgba(102, 102, 102, .6);   
    }   
.select > p:after {   
        display: block;   
        width: 10px;   
        height: 10px;   
        content: ”;   
        position: absolute;   
        top: 1.4rem;   
        rightright: 2rem;   
        border-bottom: 1px solid #33CC66;   
        border-left: 1px solid #33CC66;   
        transform: rotate(-45deg);   
        transition: transform .3s ease-out, top .2s ease-out;   
    }  

1、设置 p 和 ul 元素的背景颜色和边框等设置。