> 웹 프론트엔드 > CSS 튜토리얼 > 드롭다운 목록 선택의 기본 스타일을 수정하는 CSS의 예

드롭다운 목록 선택의 기본 스타일을 수정하는 CSS의 예

小云云
풀어 주다: 2018-02-28 11:08:36
원래의
4152명이 탐색했습니다.

아이콘 교체와 같은 선택의 일부 기본 스타일은 수정하기 어렵습니다. 다음으로 이러한 기본 스타일을 수정하는 방법에 대해 이야기하겠습니다. 이 기사가 모든 사람에게 도움이 되기를 바랍니다.

select에 상위 요소 p를 추가하는 목적은 p의 스타일로 선택 스타일을 덮기 위한 것입니다.

css 코드:

        p{
            //用p的样式代替select的样式
            width: 200px;
            height: 40px;
            border-radius: 5px;
            //盒子阴影修饰作用,自己随意
            box-shadow: 0 0 5px #ccc;
            position: relative;
        }
        select{
            //清除select的边框样式
            border: none;
            //清除select聚焦时候的边框颜色
            outline: none;
            //将select的宽高等于p的宽高
            width: 100%;
            height: 40px;
            line-height: 40px;
            //隐藏select的下拉图标
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            //通过padding-left的值让文字居中
            padding-left: 60px;
        }
        //使用伪类给select添加自己想用的图标
        p:after{
            content: "";
            width: 14px;
            height: 8px;
            background: url(img/xiala.png) no-repeat center;
            //通过定位将图标放在合适的位置
            position: absolute;
            right: 20px;
            top: 45%;
            //给自定义的图标实现点击下来功能
            pointer-events: none;
        }
로그인 후 복사

select의 기본 스타일 중 일부는 아이콘 교체와 같이 수정하기 어렵습니다. 다음으로 이러한 기본 스타일을 수정하는 방법에 대해 이야기하겠습니다. HTML 코드:

관련 권장 사항:

라디오, 체크박스 수정 및 기본 스타일 선택 방법_html/css_WEB-ITnose

🎜

위 내용은 드롭다운 목록 선택의 기본 스타일을 수정하는 CSS의 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿