Trying to change fill color of svg when input is focused

Question

I have an SVG icon next to an input field. When the icon or input is hovered, both should change color together, and when either is clicked, the input should be focused and both should stay the hover color.

The problem I'm having is that the SVG won't keep the hover color when the input is focused. I've tried using if ($('.input').is(':focus')) but it takes me a step backwards in that it somehow prevents the color changing even on hover.

JSFiddle - Uncomment the JS to check what I attempted in vain. Thanks.

 $(document).ready(function() { $('#current-amount-div').click(function() { $('.amount-input').focus(); }); /*if ($('.amount-input').is(":focus")) { $('.symbol-text').css({ fill: '#3c93ae' }); } else { $('.symbol-text').css({ fill: '#6ab5cc' }); }*/ }); 

 #current-amount-div { width: 163px; display: block; margin: auto; transition: color 0.25s, fill 0.25s ease-in-out; } #current-amount-div:hover .amount-input { border-color: #3c93ae; } #current-amount-div:hover #oc-symbol text { fill: #3c93ae; } #oc-symbol { float: left; } #oc-symbol text { transition: fill 0.25s ease-out; } .symbol-text { fill: #6ab5cc; } .amount-input { width: 120px; margin-left: 5px; margin-top: 17px; display: inline; border: 0; outline: 0; background: transparent; box-shadow: none; border-bottom: 2px solid #6ab5cc; } .amount-input:focus { border: 0; outline: 0; background: transparent; box-shadow: none; border-bottom: 2px solid #3c93ae; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="current-amount-div"> <svg id="oc-symbol" width="36px" height="48px" viewBox="11.5 0 75 100" enable-background="new 11.5 0 75 100" xml:space="preserve"> <g> <text class="symbol-text" transform="matrix(1 0 0 1 5.8066 87.1475)" font-family="'Apple-Chancery'" font-size="112.6105">C</text> <text class="symbol-text" transform="matrix(0.8797 0.0076 -0.0087 1 29.2212 72.208)" font-family="'AvenirNext-MediumItalic'" font-size="79.8022">o</text> </g> </svg> <input class="amount-input" type="number" /> </div> 

Answer 1

Using Script

Add One more Class SvGFocusColor . and this Class add only focus in textbox then apply and remove focus then remove Class `SvGFocusColor'

$('.amount-input').focus(function () {
     $('.symbol-text').addClass('SvGFocusColor');
}).blur(function () 
{
  $('.symbol-text').removeClass('SvGFocusColor');

});

Css

.SvGFocusColor
    { 
    fill: #3c93ae !important;
    }

Live Demo Here

Snippet Example Below

  $('.amount-input').focus(function () { $('.symbol-text').addClass('SvGFocusColor'); }).blur(function () { $('.symbol-text').removeClass('SvGFocusColor'); }); 

 #current-amount-div { width: 163px; display: block; margin: auto; transition: color 0.25s, fill 0.25s ease-in-out; } #current-amount-div:hover .amount-input { border-color: #3c93ae; } #current-amount-div:hover #oc-symbol text { fill: #3c93ae; } #oc-symbol { float: left; } #oc-symbol text { transition: fill 0.25s ease-out; } .symbol-text { fill: #6ab5cc; } .amount-input { width: 120px; margin-left: 5px; margin-top: 17px; display: inline; border: 0; outline: 0; background: transparent; box-shadow: none; border-bottom: 2px solid #6ab5cc; } .amount-input:focus { border: 0; outline: 0; background: transparent; box-shadow: none; border-bottom: 2px solid #3c93ae; } .SvGFocusColor { fill: #3c93ae !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="current-amount-div" class="SvGFocusColor"> <svg id="oc-symbol" width="36px" height="48px" viewBox="11.5 0 75 100" enable-background="new 11.5 0 75 100" xml:space="preserve"> <g> <text class="symbol-text" transform="matrix(1 0 0 1 5.8066 87.1475)" font-family="'Apple-Chancery'" font-size="112.6105">C</text> <text class="symbol-text" transform="matrix(0.8797 0.0076 -0.0087 1 29.2212 72.208)" font-family="'AvenirNext-MediumItalic'" font-size="79.8022">o</text> </g> </svg> <input class="amount-input" type="number" /> </div> 

Answer 2

Your current HTML structure is as follows:

<div id="current-amount-div">
    <svg id="oc-symbol" width="36px" height="48px">
        <g>
            <text>C</text>
            <text>o</text>
        </g>
     </svg>
     <input class="amount-input" type="number" />
</div>

As <svg> comes before <input> , it can't be selected with pure css selectors. However if you switch the order of both elements in your HTML as shown below:

<div id="current-amount-div">
    <input class="amount-input" type="number" />
    <svg id="oc-symbol" width="36px" height="48px">
        <g>
            <text>C</text>
            <text>o</text>
        </g>
     </svg>
 </div>

As now <svg> is coming after <input> , we can select and style it with + sibling selector ie input:focus + svg will select the <svg> when preceding input is focused.

 $(document).ready(function() { $('#current-amount-div').click(function() { $('.amount-input').focus(); }); }); 

 #current-amount-div { width: 163px; display: block; margin: auto; transition: color 0.25s, fill 0.25s ease-in-out; } #current-amount-div:hover .amount-input { border-color: #3c93ae; } #current-amount-div:hover #oc-symbol text { fill: #3c93ae; } #oc-symbol { float: left; } #oc-symbol text { transition: fill 0.25s ease-out; } .symbol-text { fill: #6ab5cc; } .amount-input { float: right; width: 120px; margin-left: 5px; margin-top: 17px; display: inline; border: 0; outline: 0; background: transparent; box-shadow: none; border-bottom: 2px solid #6ab5cc; } .amount-input:focus { border: 0; outline: 0; background: transparent; box-shadow: none; border-bottom: 2px solid #3c93ae; } .amount-input:focus + #oc-symbol .symbol-text { fill: #3c93ae; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="current-amount-div"> <input class="amount-input" type="number" /> <svg id="oc-symbol" width="36px" height="48px" viewBox="11.5 0 75 100" enable-background="new 11.5 0 75 100" xml:space="preserve"> <g> <text class="symbol-text" transform="matrix(1 0 0 1 5.8066 87.1475)" font-family="'Apple-Chancery'" font-size="112.6105">C</text> <text class="symbol-text" transform="matrix(0.8797 0.0076 -0.0087 1 29.2212 72.208)" font-family="'AvenirNext-MediumItalic'" font-size="79.8022">o</text> </g> </svg> </div> 

Answer 3

You don't really need specific Javascript to implement this, you can use CSS for this, just like:

.amount-input:focus ~ #oc-symbol .symbol-text {
  fill: #3c93ae;
}

Have look at the snippet below:

 $(document).ready(function() { $('#current-amount-div').click(function() { $('.amount-input').focus(); }); }); 

 #current-amount-div { width: 163px; display: block; margin: auto; transition: color 0.25s, fill 0.25s ease-in-out; } #current-amount-div:hover .amount-input { border-color: #3c93ae; } #current-amount-div:hover #oc-symbol text { fill: #3c93ae; } #oc-symbol { float: left; } #oc-symbol text { transition: fill 0.25s ease-out; } .symbol-text { fill: #6ab5cc; } .amount-input { width: 120px; margin-left: 5px; margin-top: 17px; display: inline; border: 0; outline: 0; background: transparent; box-shadow: none; border-bottom: 2px solid #6ab5cc; } .amount-input:focus { border: 0; outline: 0; background: transparent; box-shadow: none; border-bottom: 2px solid #3c93ae; } .amount-input:focus ~ #oc-symbol .symbol-text { fill: #3c93ae; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="current-amount-div"> <input class="amount-input" type="number" /> <svg id="oc-symbol" width="36px" height="48px" viewBox="11.5 0 75 100" enable-background="new 11.5 0 75 100" xml:space="preserve"> <g> <text class="symbol-text" transform="matrix(1 0 0 1 5.8066 87.1475)" font-family="'Apple-Chancery'" font-size="112.6105">C</text> <text class="symbol-text" transform="matrix(0.8797 0.0076 -0.0087 1 29.2212 72.208)" font-family="'AvenirNext-MediumItalic'" font-size="79.8022">o</text> </g> </svg> </div> 

Hope this helps!