php Formulario de busqueda desplegable hover

Posted 2021-05-05

/*blk-buscador-header*/
.search-form{
    margin-bottom: 0;
}
.blk-buscador {
    float: right;
    top: 43px;
    position: absolute;
    right: 85px;
    padding-bottom: 30px;
}
.blk-buscador .container-buscador{

}
.blk-buscador .link-buscador{
    color: #FFFFFF;
}
.blk-buscador .container-buscador-form{
    display: none;
}
.blk-buscador .container-buscador:hover .container-buscador-form{

}
.blk-buscador .container-buscador .link-buscador {
    display: block;
    color: #FFFFFF;
    padding: 0 15px 0 35px;
    font-size: 14px;
}
.blk-buscador .container-buscador .link-buscador {
    background: url("../images/mobile/iconos/ico-buscar.png"),url("../images/mobile/iconos/ico-desplegable.png");
    background-repeat: no-repeat;
    background-size: 16px,10px 5px;
    background-position: 12px center, right center;
}
.blk-buscador .container-buscador-form{
    display:none;
    position: absolute;
    right: -86px;
    top: 30px;
    width: 310px;
    background-color: #EAEAEA;
    border: 1px solid #EAEAEA;
    z-index: 49;
    padding: 15px 0 15px 15px;
    -webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.25);
    -moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.25);
    box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.25);
}
.blk-buscador:hover .container-buscador-form{
    display: block;
}
/*arrow top*/
.blk-buscador .container-buscador-form:before,
.blk-buscador .container-buscador-form:after {
    content: '';
    position: absolute;
    top: -20px;
    right: 115px;
    margin-top: 0;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-right: 10px solid transparent;
    border-left: 10px solid rgba(0,0,0,0);
}
.blk-buscador .container-buscador-form:after {
    bottom: -14px;
    margin-bottom: -10px;
    border-bottom: 10px solid #EAEAEA;
}
.blk-buscador h2{
    display: none;
}

.blk-buscador input[type="submit"]{
    float: left;
    width: 80px;
    height: 30px;
    padding: 0 10px;
    margin-left: 10px;
}
.blk-buscador .form-item  input{
    float: left;
    width:205px;
    height: 30px;
    border: 1px solid #CCCCCC;
    background:#FFFFFF;

}

/* class block blk-buscador hidden-mobile */

<div class="container-buscador">
    <a class="link-buscador"><?php print t('Search');?></a>
</div>
<div class="container-buscador-form">
    <?php
        $block = module_invoke('search', 'block_view', 'search');
        print render($block['content']);
    ?>
</div>