Enhance input and icon alignment using CSS based on the Bootstrap framework

How can I create focus on two elements simultaneously?

<div class="form-group">
    <label class="control-label"></label>
    <div class="col-sm-10">
        <input type="text" class="form-control">
        <span class="loop-icon form-control-feedback"></span>
    </div>
</div>

Click here to see without focus.

I am aiming for a look similar to the desired results shown in this image.

Achieving this effect without the use of javascript is my objective.

Answer №1

To target the next element using a sibling selector, you can make use of " + ".

.inp:focus + .icon{
  color:red;/* choose any color*/
}

This piece of code will target the sibling of the input, in this case, the icon class, when the input is focused.

.form-group{
position:relative;
}

.icon{
    position: absolute;
    right: 35px;
    top: 11px;
}
.inp{
  padding:right:40px;
}

.inp:focus + .icon{
  color:red;/* pick any color you like*/
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
    <label class="control-label"></label>
    <div class="col-sm-10">
        <input type="text" class="form-control inp">
        <span class="fa fa-search form-control-feedback icon"></span>
    </div>
</div>

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

Adjust the message hues upon form submission with Ajax

Can anyone provide assistance? I am in need of a functional form for sending emails. <form enctype="multipart/form-data" role="form" id="form" method="post" action="handler.php"> <div class="form-row"> <div class="form-g ...

Having trouble adjusting the vertical position of jQuery Spinner buttons

I'm attempting to customize the jQuery spinner with styling applied like this: <span class="ui-spinner ui-widget ui-widget-content ui-corner-all" style="height: 14px;"> <input id="testSpinner" class="ui-spinner-input" name="value" aria-value ...

Crafting a triangle's shape using user inputs and a button: a step-by-step guide

https://i.sstatic.net/EAvcU.png I recently created a form similar to the one shown above, but I omitted the triangles on the left and right sides. However, after implementing this feature, my form became static instead of adaptive (I specified sizes in pi ...

Utilize Flexbox to arrange elements in a column direction without relying on the position property in CSS

Flexbox - align element to the right using flex-direction: column; without relying on position in CSS Hello everyone, I am looking to move my row element to the right without using positioning. This code includes flex-direction: column; and I do not have ...

Having trouble adding a custom font with override to MuiCssBaseline in react-admin, the @global @font-face seems

I am attempting to integrate the NotoSansSC-Regular.otf font from Google into my react-admin application as the default font for simplified Chinese text. I have managed to make it work by including the fonts in the root HTML file using CSS, like this: ty ...

Tips for displaying specific information using Javascript depending on the input value of an HTML form

I am working on an HTML form that includes a dropdown list with four different names to choose from. window.onload = function(){ document.getElementById("submit").onclick = displaySelectedStudent; } function displaySelectedStu ...

Styling the Padding of MUI Select Component in ReactJS

Currently, I am facing an issue with the Material UI Select component where I am trying to decrease the padding within the element. The padding seems to be a property of one of the subclasses .MuiOutlinedInput-input, but my attempts to change the padding h ...

Align dropdown menus vertically in Bootstrap

Issue: Struggling to vertically align multiple dropdown menus in Bootstrap. Currently, the left side of the navbar is properly aligned but not the right side. Seeking advice on how to approach this problem and find a solution. Code Example: <h ...

Stacking of div elements is not possible when they have a position relative

To summarize, I created a container div (parent) with a relative position and then added 3 children divs with absolute positions. Now, I am attempting to add another div that should appear below all of this content, essentially representing the next sectio ...

Toggling in JS does not alter the DIV element

I attempted to utilize Bootstrap toggle to modify the div HTML content similar to the example shown at with a slight modification, but unfortunately, it did not function as expected due to a discrepancy in my current JavaScript code. I am unsure of what I ...

Styling text using CSS depending on the displayed text

Utilizing Awesome Tables (AT), I am extracting data from a Google Sheets document to display on a website. The HTML template in the sheets is used for formatting the data, specifically focusing on the table output with inline CSS styling. Since the templat ...

I am encountering a continuous css ParserError while trying to compile my react project

I'm having trouble with the compilation of my React project. While everything runs smoothly with npm start, I encounter an error during compilation: npm run build <a href="/cdn-cgi/l/email-protection" class="__cf_ema ...

Bootstrap datepicker embedded within a modal will scroll along with the parent page, rather than the modal itself

I recently encountered an issue with a bootstrap template where I needed to incorporate a datepicker within a modal. The modal contains scrollable content, but when I clicked on the datepicker field and scrolled the page, the datepicker moved with the pa ...

Learn how to extract an entire table from a website using Kimono Labs, rather than just the first ten rows

Currently, I am utilizing Kimono labs to generate an API for scraping data from the table on this specific website. However, the website only displays the initial 10 rows of the table by default, limiting my API output to just 10 rows. Is there a method to ...

Ways to display and conceal a div when hovering over another div

Currently, I have 4 divs grouped under the class "menubut." I am attempting to create a small overlay that appears when hovering over the menubut classes. Additionally, I want another div called "red" to show up about one-tenth of the size of the menubut ...

Tips for organizing child cards within a parent card using Bootstrap

I'm trying to set up my child card within the parent card to look like the image provided. I'm using Bootstrap 4 and the card_deck class. https://i.sstatic.net/ihWrb.png However, I'm facing difficulties in getting the layout to match the p ...

Unable to supersede the current CSS styling

I have implemented the example found here in my project and now I am trying to make the table stretch to fit the entire page. To achieve this, I have added the following CSS: html, body{ height: 100%; } #gridContainer { height: 100%; } table{ ...

Combine and blur multiple background images using CSS blending techniques

I am currently working on a website, which is just a demo built in ReactJS: The issue I'm facing is related to the background. The idea behind the app is simple - it consists of 4 parts, with the top part displaying weather information without a bac ...

CSS division nested within the center float division

In my attempt to design a 3-column home layout, I have successfully styled the center, left, and right sections. However, I am facing difficulty in placing two sliders within the middle class. My goal is to have slider1 positioned on top inside the middle ...

The slider image on my Bootstrap website is not properly displaying on mobile devices

Check out my bootstrap website which features a slider: here Although the slider image is displaying correctly on desktops, it's not fitting properly on mobile devices. I've tried adjusting the CSS with the following code: @media only screen ...