CSS를 사용하여 양식 페이지를 디자인하는 방법(예제 포함)-CSS 튜토리얼-php.cn

CSS를 사용하여 양식 페이지를 디자인하는 방법(예제 포함)

不言

풀어 주다： 2018-11-24 14:41:57

앞으로

3304명이 탐색했습니다.

이 문서의 내용은 CSS를 사용하여 양식 페이지를 디자인하는 방법(예제 포함)에 대한 내용입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

최근 프로젝트를 하다 보면 늘 다양하고 이상한 요구사항에 부딪히게 됩니다. 부트스트랩과 같은 UI 프레임워크를 사용하면 고객 요구를 충족할 수 없습니다. 당신은 자신의 두뇌를 사용하여 일부 스타일을 직접 작성할 수 있습니다.

입력 스타일 조정 방법(자리 표시자 글꼴 스타일 포함)

/*placeholder字体颜色*/
::-webkit-input-placeholder { /* WebKit browsers */
    text-align: center;
    color:RGB(154,171,180);
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    text-align: center;
    color:RGB(154,171,180);
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    text-align: center;
    color:RGB(154,171,180);opacity:1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    text-align: center;
    color:RGB(154,171,180) !important;
}

로그인 후 복사

양식 항목 스타일 수정

select{
 /*清除select的边框样式*/
    border: none;
 /*清除select聚焦时候的边框颜色*/
    outline: none;
 /*隐藏select的下拉图标*/
    appearance: none;
 /*通过padding-left的值让文字居中*/
    padding-left: 50px;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 370px;
    line-height: 41px;
    height: 41px;
    border-radius: 20px;
    border:1px solid rgba(185,198,203,.5);
    box-shadow: 0 0 2px #ccc;
}

로그인 후 복사

같은 방법으로 입력, 버튼 및 기타 양식 항목을 조정할 수 있습니다. 이러한 흔하지 않은 속성을 통해.
양식 항목에서 다음 효과를 얻으려면:

使用伪类给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;
}

로그인 후 복사

CSS를 사용하여 양식 페이지를 디자인하는 방법(예제 포함)