Modify the color of the FA SVG icon when the input is in focus

Have you ever wanted to modify the color of fa-svg icons when the input field is focused? If you are using MDB (Material Design for Bootstrap), then achieving this customization is quite possible.

Check out the HTML code snippet below:

<div class="col-md-6">

        <div class="md-form">
          <i class="fa fa-user prefix active"></i>
            <?php echo form_input('display_name', set_value('display_name', $user->display_name),'class="form-control" id="Display Name" required'); ?>
          <label for="Display Name">Display Name</label>

        </div>

</div>

One approach you might have tried involves using CSS, like so:

input:focus + .fa {
    color: #4285f4;
}

If this method didn't provide the desired outcome for you, consider exploring alternative solutions. The goal is to have the fa-icon change color when the input field is in focus mode.

To get a better idea of how it should look, refer to the image linked here: https://i.sstatic.net/VpXoo.png

If you're wondering how to go about implementing this color change feature successfully, consult the reference illustration shown with the icon updated upon input focus: https://i.sstatic.net/LxRYw.png

Answer №1

Unfortunately, the + selector does not work in this case because it is a sibling selector that directly follows the first element, which is an input. One suggestion would be to use JavaScript to achieve the desired effect. Another option could be to target the parent element and change the icon color when the md-form has the class "is-focused". I hope this information proves helpful!

UPDATE

You can add an onclick function for the input like so:

Javascript / jQuery

$('#Display_Name_input').on('focus', function(){
   $(this).parent().addClass('is-focused');
});

CSS

.md-form.is-focused .fa {
   color: #4285f4;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Calling functions in AngularJS/HTML can help you execute specific

Just started with angularjs and facing some major issues haha... I have something that seems to be working fine, but I can't figure out what's wrong with this code... can someone please help me? Here it is: Basically, the scope.create function ...

The functionality of responsive images is not functioning as intended within the Bootstrap framework

I'm currently working on troubleshooting a code issue. I am trying to implement a responsive image using Bootstrap, but it seems to not be functioning correctly. How can I go about resolving this problem? <header class="masthead text-center text-w ...

Issues with displaying iframes on iOS devices, particularly iPhones

There is a strange issue I am encountering with iframes not displaying on certain phones while working perfectly on others. (They show up fine on all android devices) (However, they do not work on iphone 6 and 7 but surprisingly work on 7 plus, 7S, and a ...

No changes occur within this JavaScript code

I am currently working on a piece of Java Script code: document.onreadystateChange = function() { if (document.readystate === "complete") { var menu = document.getElementsByClassName('menu'); var b0 = menu[0]; b0.addE ...

Incorporate Videos into HTML Dynamically

Is there a way to dynamically embed videos from a source into an HTML page? My goal is to make it easy to add new videos to the page by simply placing them in a folder and having them automatically embedded. I am wondering if this can be achieved using J ...

The image is not aligning properly within the navigation bar

I had some queries in mind: 1) How can I ensure that the circular profile image on the rightmost side fits within the header without overflowing? 2) How do I properly align the last three images at the bottom (in the "R" class), with adequate spacing bet ...

Randomly positioning an image while the page is loading

I've been developing a portfolio website to showcase my design work, but I've encountered a minor issue. My goal is to have the images load in random positions and then make them draggable using Dragabilly. However, sometimes all the images end ...

What's the best way to activate multiple functions when the same key is pressed repeatedly?

I encountered a challenge while trying to set up different functions for the same key press event. Specifically, I wanted to call function1 when the space key was pressed once, function2 when it was pressed twice, and function3 when pressed thrice. Despit ...

Attempting to convert a Raw image file and upload it onto the server

I am currently attempting to upload an image to my server using PHP. I have two files for this task - index.php and myscript.php. Index.php <div id="results">Your captured image will appear here...</div> <h1>Mugshot Test Page& ...

Issue: Images are not displaying in jQuery slideshow.Possible cause: There

I'm currently working on developing a slideshow using jQuery and HTML. However, I've encountered an issue where only one image is displaying while the other slides are not showing up at all. I've been troubleshooting this problem but haven&a ...

CodeIgniter: Bootstrap disables become enabled once validation is completed

My modifuser views have a disabled input field set to hold the id value. <?php echo form_open('user/updateuser'); ?> <legend>Update User</legend> <div class="form-group"> <label for="id">ID</label> ...

The height of the table cell is not being preserved properly, resulting in the background being duplicated

Currently, I am enclosing my form within a table structure. The table consists of 9 cells arranged in 3 rows and 3 columns. In this arrangement, [0,0] represents the top left corner, [1,1] is considered as main form content, and [2,2] signifies the bottom ...

Issue with Sticky Positioning in Bootstrap Column

Looking for some help with making my form sticky while users scroll past other content on the page. I've used this method successfully before, but for some reason it's not working this time. Can anyone shed some light on why my form won't s ...

Wrapping text around an image using two distinct Angular components

Can text wrap around an image in Angular even if they are in separate components? Or do the text and image have to be within the same component for this to work, regardless of whether the image is on the left or right side? https://i.stack.imgur.com/hdlxD ...

Achieving a centrally aligned flex container with left-aligned flex items

My goal is to center the flex items, but when they go onto a second line, I want item 5 (from image below) to be positioned under item 1 instead of centered in the parent container. https://i.sstatic.net/GhD1E.png Here's a sample of my current setup ...

Fetch information post search action through Ajax on a single PHP page

Looking for some guidance on using AJAX and PHP together. I've set up a page that uses AJAX to load data, and it's displayed with pagination. However, I'm struggling to redirect the search results back to birds.php. birds.php <script ty ...

Is it necessary to always include all styles for jQuery UI separately in my project?

While reading various articles, I have noticed a common suggestion to explicitly bundle each jQueryUI .css file, such as the answer provided on How to add jQueryUI library in MVC 5 project?. However, upon examining the .css files within the Content/themes/ ...

Sliding HTML tabs for easy navigation

Is there a way to display multiple tabs in a limited space by using arrows to toggle between hidden tabs? Or perhaps by dragging the tab strip back and forth as needed? Imagine having 10 tabs but only room for 5 to be visible: Tab 1 Tab 2 Tab 3 Tab 4 ...

"Implementing a consistent body border design on all pages using CSS for print media

Having an issue with my html page layout where I am unable to display a border on both printable pages. My current code only adds the border to the first page. Any suggestions on what I need to change in order to show the border on every printed page? Be ...

Incorporating React into an already existing webpage and accessing URL parameters within a .js file

Following the official guidelines: To include React in a website, visit https://reactjs.org/docs/add-react-to-a-website.html I have created a file named test.html with the following content: <!DOCTYPE html> <html> <head> < ...