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