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
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.