Cómo hacer CSS para resultados de búsqueda como este ingrese la descripción de la imagen aquí

El resultado delante del otro elemento html, contiene linq como este

<li><a href=""></li>
<li><a href=""></li>
<li><a href=""></li>

Gracias expertas! Gracias expertos!

0
Damara Jati P 26 ene. 2016 a las 04:16

2 respuestas

La mejor respuesta

¿quieres sugerencia de búsqueda? o si desea una sugerencia en la entrada, como proporcionar una imagen para que la genere el navegador, no la genere el usuario si desea que la genere el usuario, por lo que <ul><li></li></ul> es lo mejor. de lo contrario, en su sugerencia de entrada de imagen, se genera el navegador, no el usuario, se genera desde la caché del navegador.

Si es generado por una solicitud ajax o algo así, por lo que podría tener un estilo, de lo contrario, no puede diseñar tales sugerencias.

html

<div class="form-group">
<input type="text" class="suggested_input">
<ul class="suggestions">
<li>option 1</li>
<li>option 2</li>
<li>option 3</li>
<li>option 4</li>
</ul>
</div>

CSS

.form-group{
 width:250px;  /*as you want*/
 position:relative;
 padding:0px;
 margin:0px;
}
ul.suggestions{
 width:100%; /* its width according to input width */
 border:1px solid #ccc;
 height:auto;
 display:none;
 padding:0px;
 margin:0px;
}
/* if you want style so that's why i use "li a" also */
ul.suggestions li, 
ul.suggestions li a{
 background-color:#fff;
 color:#000;
 font-size:12px; /* according to your requirement */
 font-family:arial;
 font-weight:normal;
 padding:0 10px;
 margin:0px;
 line-height:30px; /* according to your requirement */
 display:block;
}
ul.suggestions li:hover,
ul.suggestions li a:hover{
 background-color:#ccc;
 color:#000;
 text-decoration:normal;
}
ul.suggestions li:hover .suggested_input{
 background-color:#FAFFBD;
 border:1px solid #3C8DBC;
}
.suggested_input:hover .suggestions{
display:block;
}

Ejemplo: https://jsfiddle.net/hamzanisar/rzwqsrs1/

-2
Muhammad Hamza Nisar 26 ene. 2016 a las 10:08

Intente insertar este CSS en cada uno eligiendo izquierda o derecha

<style>
.right {
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
.left {
float: left;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
0
FPast 26 ene. 2016 a las 02:01