Choosing a box will cause a dashed rectangle to appear when the mouse is selected

Whenever I try to select an option in my select box, a dotted rectangle appears. How do I remove this feature?

https://i.sstatic.net/BzsL2.png

I have noticed that many others are also facing the same issue. I tried updating my CSS with some properties based on their suggestions, but it did not solve the problem.

select::-moz-focus-inner {
  border: 0;
  outline: 0;
}
select{
  color: #000;
  color: rgba(0,0,0,0);
  text-shadow: 0 0 0 #000;
  margin: 10em 10em;
}    
select::-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

For reference, I am using Firefox 38.0 on Ubuntu 14.04

javascriptcss

Answer №1

Give this a shot - 

select:-webkit-focusring {
    color: transparent;
    text-shadow: 0 0 0 black;
}

Answer №2

Finally, after applying the css properties to both the select and option tags, the dotted lines were successfully removed....

select::-moz-focus-inner, option::-moz-focus-inner {
  border: 0;
  outline: 0;
}
select, option{
  color: #000;
  color: rgba(0,0,0,0);
  text-shadow: 0 0 0 #000;
  margin: 10em 10em;
}    
select::-moz-focusring, option::-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

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 with mouse hover not triggering overlay effect between two div elements

I am trying to display articles in a 2x3 matrix with article details like image, title, author, and description wrapped inside a div. I want this entire div to be overlapped by another div of the same dimensions containing a single image. Below is a snipp ...

jqueryhtmlcss

How to programmatically unselect an ng-checkbox in AngularJS when it is removed from an array

Utilizing checkboxes to gather values and store them in an array for dataset filtering purposes. The objectives are as follows: Show child filters when parent category is selected. Unselect all children if parent is unselected (otherwise they will ...

javascriptangularjscheckbox

CSS transition effect to show content: display: block

After experimenting with different styles for another element, I added padding, height, and opacity to the div. However, there seems to be no transition effect with the current CSS code. Can anyone explain why? When a button is clicked, the class .show is ...

jqueryhtmlcss

Avoid receiving input for a button that is being covered by another button

I am currently developing an Idle Game and I am looking to include 'buy buttons' for purchasing buildings, along with a sell button embedded within the buy button. Just as a heads up, these buttons are represented by DIVs acting as buttons. Here ...

javascripthtmlbuttonparent

Has Chrome's console disappeared?

After reinstalling Chrome and opening the dev tools with F12, I encountered an error with the following code: console.debug('test'); The error message displayed was Uncaught ReferenceError: console is not defined(…) This issue persisted acro ...

javascriptgoogle-chrome

Harnessing the power of jQuery to create a horizontal scrolling experience based

I'm working on creating a javascript version of the website that currently uses flash. So far, I have completed the basic layout, which consists of a simple horizontal container with divs. You can view the code here http://pastebin.com/U3z2aJve I a ...

javascriptflash

Using JavaFX to create a TreeTableView with nodes of varying sizes

I need assistance with styling TreeTableViews and their rows. I have set up a treetableview showcasing objects named Component, divided into classes A, B, and C. In my setup, B objects are nested within A, and C objects are nested within B objects. While I ...

javacssjavafxtreetableview

What is the best way to evaluate two objects with varying data types?

Is it possible to compare two objects with different data types? var a = { sort: 7, start: "0"} var b = { sort: "7", start: "0"} I thought they should be equal, but when I try using JSON.stringify(a) === JSON.stringify(b), it returns false. ...

javascriptjsonobject

I'm having trouble getting my application to output to the console. What could be the issue?

In my cr-route.js file, I have a function that ensures the user is authenticated before displaying their name. module.exports = function (app, passport) { // ===================================== // HOME PAGE (with login links) ======== // == ...

javascriptnode.jsexpressroutesmiddleware

Experiment with the Users.Get function available in vk-io

I am having an issue with a create command: Ban [@durov] and I encountered an error. Here is how I attempted to solve the problem: let uid = `${message.$match[1]}` let rrr = uid.includes('@') if(rrr == true){ let realid = uid.replace(/[@]/g, &ap ...

javascriptnode.jsbotsvk

Accessing the ViewModel property of a parent component from the ViewModel of its child in Aurelia

Having a scenario with two distinct components: <parent-component type="permanent"> <div child-component></div> </parent-component> class ParentComponentCustomElement { @bindable public type: string = "permanent"; } clas ...

javascripttypescriptaurelia

Tips for making a Scroll Button

I am in the process of designing a horizontal website and I would like to incorporate two buttons, one on the left and one on the right, that allow users to scroll to the left and right, respectively. You can check out the site I am currently working on h ...

javascripthtmlhorizontal-scrolling

Is my implementation of Model and Views in backbone.js accurate?

I'm new to backbone.js and I've just created my first page. I'm curious to know if I'm headed in the right direction with my approach (if there even is a "correct" way in software development). Is there a way to automatically bind mode ...

javascriptbackbone.js

Unit testing for changes in AngularJS $scope variables within the .then() function

I'm currently facing an issue with unit testing a function in my controller. The problem lies in making a $scope variable testable. I am assigning the variable within the .then() block of my controller and need to ensure it is set correctly when the . ...

javascriptangularjsunit-testingkarma-jasmineangular-promise

The collapse of HTML elements converging inwards within the Bulma Framework and customized with SASS

Messy Screen Recently delving into the world of Bulma, I decided to take a shot at customizing my CSS. Unfortunately, it seems that after some tweaking, my screen layout has gone haywire. Can anyone shed light on why two elements might refuse to maintain ...

htmlcsssassbulma

What is the best way to connect multiple web pages together?

Hello everyone, I could really use some assistance with a problem I'm facing. As a newcomer to web development, I have a question about navigation bars. I've successfully created a basic webpage with a navigation bar, but now I'm unsure how ...

javascriptphpjqueryhtmlcss

Ways to implement a scrollable v-list component using Vuetify

I have set up a v-list using flex layout, where the v-list expands to fill the remaining space horizontally in a column. However, if the list contains many elements with a total height that exceeds the column's height, the list ends up sticking out of ...

javascriptvue.jsvuejs2vue-componentvuetify.js

How can one utilize JSON.parse directly within an HTML file in a Typescript/Angular environment, or alternatively, how to access JSON fields

Unable to find the answer I was looking for, I have decided to pose this question. In order to prevent duplicates in a map, I had to stringify the map key. However, I now need to extract and style the key's fields in an HTML file. Is there a solution ...

javascripthtmljsonangulartypescript

Using Typescript with Protractor for Dropdown Menus

As a newcomer to Protractor, I am looking to automate the selection of a dropdown. While I have some knowledge in JavaScript, I am currently working with typescript. Can someone advise me on how to select the dropdown option based on the text provided? Fo ...

javascripttypescriptdrop-down-menuprotractor

Can a mutable static class variable be created in JavaScript?

I have an idea similar to this concept: class Example { static var X; static setX(value) { this.X = value; } static getX() { return this.X; } } This allows the variable to be stored within the class and easily modified ...

javascriptclassvariablessyntaxstatic