Recentemente, estou escrevendo um site que recomenda um advogado para a recepção. Havia um problema na caixa de pesquisa acima. Eu queria colocar o ícone de pesquisa na caixa de pesquisa, mas não foi muito satisfatório depois de muito tempo ...
Sem mais delongas, vamos direto para o tópico:
Idéias básicas
De fato, coloque a caixa de entrada e o ícone atrás dela em uma div, defina border da caixa de entrada para 0px e finalmente defina border da div para a borda externa final
Vamos fazer o upload do código diretamente:
Html:
<div class = search> <formulário action = http: //baidu.com> <tipo de entrada = espaço reservado de texto = insira o advogado ou a experiência que você pesquisou> <pan> <a href =#> <img src = img/icon1.png alt => </a> </span> </form> </div>
CSS:
Aqui está o estilo de definir a div inteira para fora
.search {width: 250px; Altura: 35px; borda: 1px branco sólido; Radio de fronteira: 30px;}Aqui está para definir o comprimento e a largura da caixa de entrada dentro, o boder é 0px, o tamanho da fonte dentro e a borda não será brilhante quando clicada (contorno: nenhum)
Defina a transparência aqui usando rgba() , a última propriedade é a transparência (entre 0-1)
entrada {width: 200px; Altura: 35px; borda: 0; Size da fonte: 14px; Esboço: Nenhum; Background-Color: RGBA (255, 255, 255, 0); Cor: Branco; Size da fonte: 16px; margem: 0 10px; ResumirEste é o artigo sobre o código de implementação do HTML adicionando ícones na caixa de entrada transparente. Para obter um conteúdo de ícone de caixa de entrada transparente HTML mais relacionado, pesquise artigos anteriores do wulin.com ou continue a procurar os artigos relacionados abaixo. Espero que todos apoiem o Wulin.com no futuro!