Is there a way to display an outline around an input element when a user navigates sequentially (TAB button) and then hide the outline when the user clicks on the input element with the mouse? Has anyone successfully implemented this type of behavior before?
In my CSS file, I have set the following property on my :focus selector:
:focus {
outline: #00bfff solid 1px !important;
}
As of now, the outline only appears when the input element is focused.
Best Regards, Raimonds
Simply click to blur the input field.
jQuery(document).ready(function() {
jQuery('input').on('click', function() {
jQuery(this).blur();
});
});
By clicking on the input, the focus will be removed, thus avoiding triggering the CSS rule for :focus. However, this solution may not work as expected in some browsers like Chrome on Windows 7.
If you would like to test and possibly find a working alternative, here is a pen for experimentation:
Take a look at this coding example on https://jsfiddle.net/hyauyovm/2/
Let's hope this solution resolves your issue
//HTML
<input>
<input>
<input>
<input>
//JS
<script>
$("input").click(function(){
$(this).addClass('focus');
});
$("input").blur(function(){
$(this).removeClass('focus');
});
</script>
//CSS
input:focus{
outline:2px solid blue;
}
input.focus{
outline:none;
}
To achieve this effect, you have the option to implement it using either JavaScript or CSS. In JavaScript, you can utilize blur, while in CSS, you can use :focus. Below are examples demonstrating both methods:
Using CSS: View example using CSS on JSFiddle
Using JavaScript: View example using JavaScript on JSFiddle
For your specific scenario, you can reference the following code snippet:
Give this a shot:
input:focus {
border: #ff4500 solid 2px !important
}Struggling to execute an AJAX call (using only JavaScript) to store a user in the database. The JavaScript file I am working with includes this code: var url = "interfata_db.php"; xmlhttp.onreadystatechange = function(){ alert('ready state &apos ...
I'm encountering a CSS issue with an input-range element: <input type="range" id="difficultSelect" max="3" min="1" value="2"/> Here is the CSS code I am using: -webkit-appearance: none; z-index: 102; width: 225px; height: 5px; margin-left: 95 ...
I'm currently working on building an HTML form that includes a dropdown menu. Check out the code snippet I have below: $output[]='<td><select name="qty'.$name.'">' for($count=1;$count<=$total;$count+=1) { &apo ...
I have encountered an issue in my HTML template where I am unable to retrieve the value within the input field upon submitting, especially if a custom category name was entered. The code includes an HTML <select> and <input> fields: {% for i ...
Incorrect HTML code example: <div ng-app="myApp" ng=controller="myCtrl"> States : <select id="source" name="source"> <option>{{state.name}}</option> </select> Districts: <select id="status" name="status"> ...
Whenever the user interacts with a div.nav element, jQuery switches its class to active. Presently, it applies display: block to all three of the div.content elements. I aim for jQuery to only apply the display: block property to the div.content elements t ...
I have a similar question to the one posed in this thread How to split Bootstrap column in mobile mode, but I am working with Bootstrap 5 and the previous solution using float: right no longer works due to flexbox. On desktop, I have two columns and I wan ...
When I click on a button, I want to remain in the section while also having the button stay in the background with a color that indicates my selection. This could be for breakfast, lunch, dinner, or any other section. const Categories = ({ categories, fi ...
Similar Question: How to Retrieve Element By Class in JavaScript? I am looking to extract the text content from a span element that does not have an ID but only a specific class. There will be only one span with this particular class. Can anyone guide ...
I'm having an issue with HTML anchor tags not working properly in Chrome and Safari. Instead of scrolling up, the page scrolls down when clicked. Here is the HTML code I'm using: <a id="to-top"></a> <a class="button toTop" href="# ...
Check out this jQuery fiddle I'm using for my project: http://jsfiddle.net/BREvn/5/ Currently, I am creating a bird shooting game where the number of birds increases with each level. These birds are essentially represented by div elements, but I am ...
Currently, I have an HTML table set up using a Django template to showcase data from my database. I am looking to ensure that this table remains updated in real-time whenever the database undergoes changes. Despite my research efforts, there is limited inf ...
After extensively experimenting with the three.js library, I was able to establish two distinct scenes – one canvas-rendered and the other css3d-rendered – both displayed using the same perspective camera. Note: Despite my efforts, I am constrained to ...
Seeking assistance with displaying a SweetAlert popup only if a certain div class is not found on the page. It appears to work when using an ID, but not with classes. Any suggestions on how to trigger this popup if the specified div class is absent? < ...
I have been struggling to find a solution to this specific issue without any luck. Your assistance would be greatly appreciated. Currently, I am attempting to implement autocomplete address functionality using Google API with the following code: var inpu ...
After reading a different post addressing the same issue, I still couldn't figure out how to implement the solution into my own scenario. The discussion revolved around the topic of node js Array.push() not working using mongoose. In my Mongoose asyn ...
When working in codebehind, I often create an HTML list using the following method: HtmlGenericControl list = new HtmlGenericControl("ul"); for (int i = 0; i < 10; i++) { HtmlGenericControl listItem = new HtmlGenericControl("li"); Label textLabel ...
I am currently working on an svg animation that involves changing the color of the svg to a different color, creating a running light effect. Rather than fading the fill color of the entire svg as commonly seen in examples, I aim to achieve a dynamic trans ...
Having limited experience with running JavaScript from the command line, I am facing a situation where I need to utilize an NPM package for controlling a Panasonic AC unit, which includes a wrapper for their unofficial API. My objective is to create a sim ...
Recently, I've been on the hunt for a sprite sheet that is akin to bootstrap's, but dedicated solely to emotion icons like smiley faces and sad faces. Unfortunately, my search has been fruitless so far. Does anyone happen to know of such a sprite ...