Estoy trabajando con html y js, tengo una serie de iconos como items de una lista HTML que forman parte de un formulario, los cuales si se selecciona algun icono, el background del icono cambia para distinguir que ese icono esta seleccionado, y obtengo el nombre de la clase del icono en un textbox o input para guardarla en una BD junto con los otros datos, me surge un problema que cuando selecciono el icono cambia de color el background pero cuando hago click en cualquier parte de la pagina se borra el background y queda como si no hubiera seleccionado nada, pasa como si cambiara el foco, Alguien sabe ¿como puedo corregir ese problema?, no se si sea el css o el js mi codigo esta abajo de la imagen
JS
$(document).ready(function () {
var iconos = document.querySelectorAll('.fa');
//El Input a dondese enviará el valor de la clase
var input = document.getElementById('<%=txtIcono.ClientID%>');
//alert(input);
//Iteramos sobre los iconos para agregar el Listener
for (var i = 0; i < iconos.length; i++) {
//agregamos el Listener para el evento click
iconos[i].addEventListener('click', function () {
// asignamos al input el valor de la clase.
input.value = this.className;
});
}
});
CSS
.list-unstyled {
padding-left: 0;
list-style: none;
}
.list-inline li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
margin-bottom: 10px;
}
.social-icons .fa {
font-size: 1em;
}
.social-icons .fa {
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
color: #FFF;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.social-icons.icon-circle .fa {
border-radius: 50%;
}
.social-icons.icon-rounded .fa {
border-radius: 5px;
}
.social-icons.icon-flat .fa {
border-radius: 0;
}
.social-icons .fa:hover, .social-icons .fa:active {
background-color: blue;
color: #FFF;
-webkit-box-shadow: 1px 1px 3px #333;
-moz-box-shadow: 1px 1px 3px #333;
box-shadow: 1px 1px 3px #333;
}
.social-icons.icon-zoom .fa:hover, .social-icons.icon-zoom .fa:active {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
.social-icons.icon-rotate .fa:hover, .social-icons.icon-rotate .fa:active {
-webkit-transform: scale(1.1) rotate(360deg);
-moz-transform: scale(1.1) rotate(360deg);
-ms-transform: scale(1.1) rotate(360deg);
-o-transform: scale(1.1) rotate(360deg);
transform: scale(1.1) rotate(360deg);
}
.enlace > a:focus .fa {
cursor: pointer;
background-color: gold;
border-radius: 50%;
}
Lista HTML
<ul id="navegador" class="social-icons icon-circle list-unstyled list-inline">
<li class="enlace"><a href="#"><i class="fa fa-android"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-apple"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-bitcoin"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-css3"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-dropbox"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-facebook"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-facebook-square"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-google-plus"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-html5"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-instagram"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-linkedin-square"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-linux"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-pinterest"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-pinterest-square"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-skype"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-trello"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-tumblr"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-tumblr-square"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-twitter"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-twitter-square"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-vimeo-square"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-windows"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-youtube"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-youtube-play"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-youtube-square"></i></a></li>
</ul>