최근에 저는 프론트 데스크에 변호사를 추천하는 웹 사이트를 작성하고 있습니다. 위의 검색 상자에 문제가있었습니다. 검색 상품을 검색 상자에 넣고 싶었지만 오랜 시간이 지난 후에도 만족스럽지 않았습니다.
더 이상 고민하지 않고 주제로 바로 가자.
기본 아이디어
실제로 입력 상자와 그 뒤에 아이콘을 DIV에 넣은 다음 입력 상자의 border 0px로 설정하고 DIV의 border 최종 외부 테두리로 설정하십시오.
코드를 직접 업로드합니다.
HTML :
<div class = search> <form action = http : //baidu.com> <입력 유형 = 텍스트 자리 표시 자 = 검색 한 변호사 또는 전문 지식을 입력하십시오> <span> <a href =#> <img src = img/icon1.png alt => </a> </span> </div>
CSS :
다음은 전체 DIV를 외부로 설정하는 스타일입니다.
.Search {너비 : 250px; 높이 : 35px; 테두리 : 1px 솔리드 흰색; Border-Radius : 30px;}다음은 입력 상자의 길이와 너비를 내부에 설정하고 Boder는 0px, 내부 글꼴 크기이며 클릭하면 테두리가 밝지 않습니다 (개요 : 없음).
rgba() 사용하여 투명성을 설정하면 마지막 속성은 투명성입니다 (0-1)
입력 {너비 : 200px; 높이 : 35px; 국경 : 0; 글꼴 크기 : 14px; 개요 : 없음; 배경색 : RGBA (255, 255, 255, 0); 색상 : 흰색; 글꼴 크기 : 16px; 여백 : 0 10px; 요약이것은 투명 입력 상자에 아이콘을 추가하는 HTML의 구현 코드에 관한 기사입니다. 관련 HTML 투명 입력 상자 아이콘 콘텐츠를 보려면 Wulin.com의 이전 기사를 검색하거나 아래 관련 기사를 계속 찾아보십시오. 나는 모두가 앞으로 Wulin.com을 지원하기를 바랍니다!