Dynamically apply focus styles to div elements using CSS styling

In my dialog, I have a textbox on the left side and an icon (div) on the right side. When the dialog opens, both elements should be focused.

Here is the HTML code:

<input id="text-link" class="form-control" onfocus="this.select();" onclick="this.select();"/>
            <div class="form-control" id="link"></div>

I have tried the following:

1. $("#link").focus();
2. document.getElementById("link")

However, neither of these solutions are working. Can someone please suggest a CSS styling method to dynamically add focus to that div?

jqueryhtmlcssfocus

Answer №1

Give this a try:

Here's the jQuery code:

 $(document).ready(function(){
    $("#link").removeClass("focusdiv");
    $("#text-link").focus(function(){
       $("#link").addClass("focusdiv");
    });
 });

And here is the corresponding CSS:

 .focusdiv{
    box-shadow: inset 1px 1px 5px 1px #eee; // Customize the box-shadow as needed.
    -moz-box-shadow: inset 1px 1px 5px 1px #eee;
    -webkit-box-shadow: inset 1px 1px 5px 1px #eee;
    border: 2px solid #ccc;
 }

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

What is the most effective way to eliminate error messages from the email format checker code?

Recently, I've been working on a code to validate forms using javascript/jquery. One particular issue I encountered was related to checking email format. The problem arose when entering an invalid email - the error message would display correctly. How ...

javascriptjquery

Transitioning from feelings to sewing: incorporate a duo of properties within variations and breakpoints

I was thinking about how to convert this styled-emotion code into stitches. Essentially, I need to handle the onlyShowOnDesktop and breakpoint props. The definition of breakpoint is as follows: const breakpoint = isTopNavigationBreakPoint ? theme.defaultB ...

cssreactjsstitches

What could be causing my CSS and HTML to display incorrectly in IE and Chrome browsers?

I am currently facing a challenge with my landing page design. The positioning of a specific div element seems to be correct in Internet Explorer, but it is misaligned in Chrome. Is there a way to ensure consistent display across different browsers? The pr ...

htmlcssgoogle-chrome

utilize jQuery to load webpage with an HTML dropdown element

Querying the Campaigns: // Getting the campaigns $campaigns = $wpdb->get_results( "SELECT * FROM tbl_campaigns ORDER BY campaignID DESC", OBJECT_K ); // Displaying the Cam ...

phpjavascriptjquerymysqlwordpress

What steps can be taken to enhance this Menu code?

I have a function that generates my main and sub menus based on a page ID I provide. It ensures the correct menu item is highlighted using CSS. My question is: How can I optimize this code (and similar ones)? How can I reduce the lines of code and avoid r ...

phphtml

Adjusting Media Queries according to the browser window's zoom level

Is there a way to detect the browser width dynamically? For instance, can I adjust the CSS styling based on zoom adjustments like ctrl + or ctrl -? By "box," I am referring to a perfectly square shape. So, when the browser width is 100%, I want a layout wi ...

javascriptjqueryhtmlcss

Is there a way to modify a component's CSS by using a global CSS class name in Angular?

We have implemented a system where a class on the html element determines whether the user is in dark or light mode of the application. <html class="dark-mode"></html> This class is dynamically added using Renderer2 in a service that detects ...

cssangularsassangular2viewencapsulation

Themes in Next.js with a splash of color

Is there a way to implement theming with color picking for elements? Check out the example here. I've explored using CSS variables and changing the document classname, but I'm uncertain if this is the best approach. @tailwind base; @tailwind com ...

cssreactjsnext.jsthemescss-variables

Display a modal pop-up containing HTML content

I recently started building a small website using Zurb Foundation. I have created a basic grid layout with large metro style div thumbnails (about 10 on the page). Now, I want to enhance user interaction by implementing modal windows that appear when a th ...

javascriptjqueryhtmlcssmodal-dialog

Using Selenium to interact with drop-down lists using div tags instead of select tags

As a newcomer to automated testing using Selenium Web Driver, I am struggling to test drop down lists for the location type without relying on the select command. The element in question is enclosed within a div tag. I attempted sending keys but that meth ...

javascriptpythonhtmlseleniumweb-scraping

The arrangement of my HTML elements needs some adjustment

I am encountering an issue with the bootstrap classes not functioning as expected. This is a combination of templates. The problematic sections are <div class="col-md-8"> and <div class="col-md-4" style="margin: 0;"& ...

htmlcssdjangobootstrap-4

Clicking on the button has no effect whatsoever

I'm currently dealing with a button on my webpage that seems to be causing me some trouble: <script> function changeMap() { container.setMap(oMap); } </script> <button onClick="changeMap"> Click here </button> Upon inspe ...

javascriptjqueryhtmlbuttonloading

Disregard the popstate triggered by Safari's Initial Page Load

Utilizing pushState, I am able to generate the page view on popstate events based on the history.state of the current page. In cases where there is no history.state present, my intention is to reload the document (hopefully). window.onpopstate = function ...

javascriptjquerysafari

Unable to pass data using $.post() method

I am trying to send some data as a variable using jQuery's $.post() method to a PHP file and then display the result in a div after clicking a button. Unfortunately, I'm facing an issue where the data isn't being retrieved in the PHP file. ...

phpjqueryajax

Ways to restrict users from accessing a file stored on the server?

This might seem like a silly question, and yes, it is quite naive. I currently have two files stored on my server: index.html, file.txt Is there a simple way to prevent users from accessing file.txt directly by entering its URL like this: website.d ...

phphtmlfileserver

Avoid passing down line-height settings to elements within nested elements

Is there a way to prevent the span styled with font-size: 12px from inheriting the line-height of the span styled with font-size:18px? I need the line-height value to be 1.5 for both 18px and 1.5px font sizes, but I am unable to separate the two spans. ht ...

css

Encountered an issue when trying to send a PHP email using AJAX

I need some assistance regarding the email sending issue. It seems that there is an error in my PHP code as I am unable to send emails. The configuration for php mail needs to be checked since the script always goes to the else part. <?php if($_POST) ...

jqueryajaxphpmailer

What is the best way to smoothly transition an element into view, then make it disappear seamlessly by fading it

Issue My current code features a <button> that, upon a single click, updates the class of a <div> element to "fade-in" and inserts it into the DOM. This action causes the <div> to visually fade in once it's in the DOM. However, if I ...

javascripthtmlcsscss-animations

The output from the Python and SQLite combination is accurate, however the HTML rendering is not displaying the data correctly

Retrieving data from a database using different methods can yield varied results. When the method is set to 'get', it returns all information, but when it's 'post', it only returns the searched item. Although the post method return ...

htmlsqliteflaskjinja2

Exploring ways to display featured posts within specific category sections

I have 2 featured posts in 1 div id, one with a big class and the other with a small class. I want the big featured div to display posts based on categories. The code for the big featured post is shown below: <div class="main_feat"> ...

phpjavascripthtmlwordpress