CSS로 멋진 검색창 스타일을 만드는 방법은 무엇입니까? (코드 예)

이 글은 멋진 CSS 검색창 스타일을 소개합니다. 관심 있는 친구들에게 도움이 되길 바랍니다.

CSS 검색창 스타일 코드의 구체적인 예는 다음과 같습니다.

<div class="search bar">
    <form>
        <input placeholder="css搜索框代码测试" name="cname" type="text">
        <button type="submit"></button>
    </form>
</div>

스타일 스타일 코드는 다음과 같습니다.

* {
    box-sizing:border-box;
}
div.search {
    padding:10px 0;
}
form {
    position:relative;
    width:300px;
    margin:0 auto;
}
input,button {
    border:none;
    outline:none;
}
input {
    width:100%;
    height:42px;
    padding-left:13px;
}
button {
    height:42px;
    width:42px;
    cursor:pointer;
    position:absolute;
}     
.bar input {
    border:2px solid #c5464a;
    border-radius:5px;
    background:transparent;
    top:0;
    right:0;
}
.bar button {
    background:#c5464a;
    border-radius:0 5px 5px 0;
    width:60px;
    top:0;
    right:0;
}
.bar button:before {
    content:"搜索";
    font-size:13px;
    color:#F9F0DA;
}

위 검색창 CSS 코드의 테스트 효과는 다음과 같습니다.

참고:

모든 주류 브라우저는 태그를 지원합니다.

태그는 사용자 정보를 수집하는 데 사용됩니다. 입력 필드는 type 속성 값에 따라 다양한 형태를 취할 수 있습니다. 입력 필드는 텍스트 필드, 체크박스, 마스크된 텍스트 컨트롤, 라디오 버튼, 버튼 등이 될 수 있습니다.

태그는 버튼을 정의합니다. 버튼 요소 내부에는 텍스트나 이미지와 같은 콘텐츠를 배치할 수 있습니다. 이것이 이 요소와 입력 요소를 사용하여 생성된 버튼의 차이점입니다.

HTML 형식으로 버튼을 사용하는 경우 요소에 따라 브라우저마다 다른 값이 제출됩니다. Internet Explorer는 및 사이에 텍스트를 입력하고 다른 브라우저는 value 속성의 내용을 제출합니다. 버튼을 생성하려면 HTML 양식의 입력 요소를 사용하세요.

【관련 추천 글】

보기 좋은 검색창을 만드는 CSS

HTML로 모바일 측에 고정된 부동 반투명 검색창 구현

CSS3 검색창 8개 공유

위 내용은 CSS로 멋진 검색창 스타일을 만드는 방법은 무엇입니까? (코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!