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

이 문서의 내용은 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;
}

• 선택 항목을 자리 표시자와 같은 효과로 만들려면 또 다른 중요한 점이 있습니다. can set selecteddispaly:none;

<option>选择单位</option>

---

• Summary

이번 해결방법은 어려운 문제는 아니지만 시간이 좀 걸려서 적어봤습니다. 나쁜 글이라도 좋다.
첨부된 것은 github 주소이고, 제가 작성한 로그인 및 등록 정보를 남겨주세요.

위 내용은 CSS를 사용하여 양식 페이지를 디자인하는 방법(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!