When a selection element has a CSS box-shadow animation applied to it, it reverts to its default settings when expanded or clicked

A user notified me of an issue with a select element that has an animated box-shadow on it. I confirmed the problem on my work Windows computer, but unfortunately, I don't have access to a Windows setup at home for debugging.

The select element in question has a pulsating drop shadow glow effect. You can find the demo link and code below. When using Chrome (version 26) on Windows, the select element does glow, but whenever the user clicks on the menu, it resets its selection to the first option every second or less, making it impossible to scroll and choose the correct option. The select menu contains 73 options.

Is there any workaround for this issue? The same behavior occurs when applying the animation to a parent element containing the select menu.

Demo link: http://jsfiddle.net/P72u7/1/

CSS:

.glow {
    -webkit-animation-name: promptGlow;
    -webkit-animation-duration: 7s;
    -webkit-animation-iteration-count: infinite;
    animation-name: promptGlow;
    animation-duration: 7s;
    animation-iteration-count: infinite;
}

@-webkit-keyframes promptGlow {
    from {
        box-shadow: 0 0 10px rgba(51, 51, 51, 0.22);
    }
    50% {
        box-shadow: 0 0 40px rgba(51, 51, 51, 0.44);
    }
    to {
        box-shadow: 0 0 10px rgba(51, 51, 51, 0.22);
    }
}

HTML:

<select class="glow">
    <option value="1" selected="">Abraham Moss</option>
    <option value="2">Altrincham</option>
    <option value="3">Anchorage</option>
    <option value="4">Ashton Moss</option>
    <option value="73">Woodlands Road</option>
</select>

Answer №1

To enhance the appearance of the <select> element, you can enclose it within a <div> and apply some custom styling. Here is an example:

HTML

<div class="glow">
    <select>
        <option value="1" selected="">Abraham Moss</option>
        <option value="2">Altrincham</option>
        <option value="3">Anchorage</option>
        <option value="4">Ashton Moss</option>
        <option value="73">Woodlands Road</option>
    </select>
</div>

CSS

.glow {
    width: 180px; /*Adjust this to match the width of your select*/
    -webkit-animation-name: promptGlow;
    -webkit-animation-duration: 7s;
    -webkit-animation-iteration-count: infinite;
    animation-name: promptGlow;
    animation-duration: 7s;
    animation-iteration-count: infinite;
}
.glow select {
    border: 0px; /*Remove default white border added by Chrome*/
}

Check out this fiddle for a demonstration: http://jsfiddle.net/9DZht/

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

Issue in Less.js: the 'min' function encountered an error due to incompatible types

In my _main.less file, I have the following styling: #mapid { width: 100%; min-height: min(65vh, 500px); max-height: 500px; } However, when using the Less compiler with grunt, it throws an error: >> File "public/less/_main.less" chan ...

Updating the text input value in a database with PHP upon button click

Here is a breakdown of what has been implemented so far: The database table is named adhar_card. Below is the structure image for reference (Adhard_card_id serves as the primary key). https://i.sstatic.net/8j4m6.jpg Clicking on the verify button will cha ...

Building a dynamic hierarchical list in Angular 8 with recursive expansion and collapse functionality

I am attempting to construct a hierarchical expand/collapse list that illustrates a parent-child relationship. Initially, the parent nodes will be displayed. If they have children, a carat icon is shown; otherwise, a bullet icon appears. When the carat ico ...

Creating a PHP Class for Converting CSS3 Rules to Ensure Compatibility Across Different Browsers

Seeking assistance with developing a class that can process a style sheet, identify browser-specific CSS3 rules, and provide compatibility for all browsers. The goal is to simplify the process of writing styles for one browser and then generating CSS files ...

What steps can I take to ensure my dashboard table is dynamic, updates in real-time, and automatically reflects changes made in my MySQL database

FrontEnd Code import React, { Component, useState, useEffect } from "react"; import Navbar from "../Navbar/Navbar.js"; import BarChart from "../BarChart/BarChart"; import { Chart, Tooltip, CategoryScale, LinearScale, ...

Managing Custom CSS Files in Sencha Touch 2 Production Build

Currently, I am in the process of working on a mobile website using Sencha Touch 2. To develop the production build, I utilized Sencha Cmd v3. Upon testing the production version, I noticed that although my custom CSS files are present in the folder struct ...

Issue regarding the sidebar's top alignment

Having trouble with the positioning of this sidebar. It seems to be hanging slightly over the top edge instead of aligning perfectly with it. Here's how it looks: enter image description here. CSS CODE: https://pastebin.com/RUmsRkYw HTML CODE: https ...

Execute PHP and HTML code stored in a string

I have a string stored in a variable within my PHP code that looks like this: <?php $string = " <?php $var = 'John'; ?> <p>My name is <?php echo $var; ?></p> "; ?> When using the $string variable elsewhere, I ...

"Ascend beyond the constraints of fixed measurements with dynamic

My JQuery image fader has a width of 100% and height set to auto. I'm thrilled that it works perfectly on the iPhone as well. Now, I am facing a challenge while trying to make content "float" after my JQuery slider. The problem arises because I use ...

An animation triggered by scrolling using the @keyframes rule

Is it possible to smoothly animate a variable font using @keyframes on scroll and have it complete the animation loop when the user stops scrolling, rather than snapping back to the starting position? I've managed to make the animation work, but it l ...

"Internet Explorer text input detecting a keyboard event triggered by the user typing in a

It appears that the onkeyup event is not triggered in IE8/IE9 (uncertain about 10) when the enter button is pressed in an input box, if a button element is present on the page. <html> <head> <script> function onku(id, e) { var keyC = ...

Identify the occurrence of isolated "<" or ">" characters in a string that includes HTML elements

As an example, consider a string similar to: "This is a <b> Sample </b> string with characters < 100" The user has the ability to include HTML tags such as <b>, <div>, and more. These tags are permitted in this scenario. The ma ...

The <a> tag is failing to cover the appropriate section of the <div> element

I am facing the following issue: HTML: <div id="about" class="menu1"> <a href="#">About</a></div> <div id="aboutsub"> <div id="team" class="menu2"> <a href="">Team</a></div> &l ...

What is the best way to divide data using [/ -]?

I am trying to split a string that shows a date. The date is shown in the format dd/mm/yyyy or dd-mm-yyyy. This is my code (the current string is formatted as mm/dd/yyyy): <input type="data" id="dat"> ..... var dataString=$('#dat').val(); ...

The appearance of HTML varies depending on the type of mobile device being used

My email template is having display variations on different mobile devices, with the textbox sometimes centered instead of left aligned as intended. Any suggestions on what might be causing this issue and how to resolve it? Desired Display on All Devices ...

Adjusting the dimensions of the "overflow avatar" to be consistent with the other avatars displayed in AvatarGroup

When setting the max prop of the AvatarGroup, the additional avatar does not match the height of the other avatars. <AvatarGroup max={3}> <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" sx={{ width: 24, height: 24 ...

What steps can I take to address the problem in iOS 17 where sound is coming from the earpiece instead of the speaker during camera activation?

I have a Progressive Web App where I use the getUserMedia() API to access the camera and HTML audio tags for handling media content. However, ever since updating to iOS 17, I've faced an issue where audio plays through the earpiece instead of the medi ...

What is the best way to add an Apple iPhone-like effect to a menu list?

I've been working on creating a menu similar to the Apple menu using the greensock api Here is my progress so far: JSFIDDLE Update This is what I am aiming for: Fiddle Any idea why there is flickering when hovering over it? <div class="de ...

What is the best way to implement a partial color filter on an image using CSS?

Looking to give our business website a fresh update, but struggling with adding a filter to the images. Our graphics designer created a mock-up for us, but I'm not sure how to implement this feature. Any help would be greatly appreciated! ...

I recently aligned a component within a column of the Bootstrap grid using the <center> tag

Apologies for admitting this on Stackoverflow, but I'm struggling to center an element and the center tag seems to do the trick. My CSS skills are limited, so I'm reaching out to see if there's a better way to achieve this? <div class="c ...