Theme styles

Hello,
I want to say once again thank you for the best theme.
I added an icons in the field of the contact form.
I want to change icons color and icons background color on input focus.
My code:

Html:
<div class="column one-third form-row"><i class="icon-phone"></i> [tel* your-tel"]</div>
CSS:
.form-row {
margin-bottom: 10px !important;
position: relative !important;
}
.form-row i {
float: left;
width: 38px;
padding: 10px 0;
text-align: center;
position: absolute;
left: 1px;
top: 1px;
font-size: 19px;
border-right: 1px solid #ccc;
line-height: 1; 
}
.form-row i.input-focused {
  color: #fff;
  background-color: #825339;
}

Custom JS:
jQuery(function($){
        $(this).find('.form-row input').each(function() {

            $(this).focusin(function() {
                $(this).siblings('i').addClass('input-focused');
            });
            $(this).focusout(function() {
                $(this).siblings('i').removeClass('input-focused');
            });

        });
});

I can not understand why the icons is not assigned to input-focused class.

Please help.

Comments

  • Hi,

    we are not sure what you exactly did and what could be the problem  because basically above code looks fine for us except one thing. Below line:
    $(this).find('.form-row input').each(function() {
    we would replace on below:
    $('.form-row input').each(function() {
    but if this won`t help, then we have no idea what could be the problem.
Sign In or Register to comment.