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?

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

Tips for adding and verifying arrays within forms using Angular2

Within my JavaScript model, this.profile, there exists a property named emails. This property is an array composed of objects with the properties {email, isDefault, status}. Following this, I proceed to define it as shown below: this.profileForm = this ...

javascriptangulartypescriptangular2-formbuilder

Experience the power of live, real-time data-binding for date-time input with AngularFire in 3 different

Here is a simplified version of my code snippet: tr(ng-repeat='entry in ds3.entries | orderBy:orderByField:reverseSort | filter:query as results') td input.screen(type='datetime-local', ng-model='entry.date_recei ...

javascriptangularjsangularjs-directivefirebaseangularfire

I could really use some assistance with this script I'm working on that involves using ($

Using Ajax for Form Submission: $.ajax({ url: 'process.php', type: 'post', data: 'loginName=' + $("#loginName").val() + 'loginPass=' + $("#loginPass").val(), dataType: 'json', success: func ...

phpjavascriptajax

Necessary within a JavaScript Class

As a newcomer to using classes in JavaScript, I've been exploring the best practices and wondering about how 'requires' work when used within a class. For example, let's say I want to craft an IoT Connection class for connecting to the ...

javascriptnode.jsclassrequire

keep jquery scrolltop position consistent after receiving response

I created a code to show the chat history, and everything seems to be working fine. However, I encountered an issue where old posts are displayed all at once when scrolling up the div. In order to continue scrolling smoothly, I included this code $("#messa ...

javascriptjqueryajax

Displaying a div when hovering over it, and keeping it visible until clicked

I want to display a div when hovering over a button. The shown div should be clickable and persistent even if I move the cursor from the button into the shown div. However, it should be hidden when moving out of the entire area. I'm unsure about how ...

javascriptjqueryhtmlcss

Enhancing the appearance of the MUI DatePicker

I'm currently using a DatePicker component from Mui Lab and I'm attempting to customize the appearance of the Calendar component by incorporating some border or background color. Although I've tried utilizing the PaperProps prop for DatePick ...

cssreactjsmaterial-ui

Having trouble resizing divisions using three.js?

Three.js is an incredible library that offers thorough documentation and functions perfectly. I am currently attempting to display a plane with trackball control inside a div that resizes according to the window or browser size. However, I am encountering ...

cssthree.js

Unable to generate file with Compass

In my attempts to compile a project using compass, I have experimented with both the gui app and the command line. However, I consistently encounter the same error message in both cases: "Nothing to compile. If you're trying to start a new project, yo ...

csssasscompass-sass

Ajax: Failed to send POST request (404)

After adding a POST script in the manage.ejs file and console logging the data to confirm its functionality, I encountered an issue. Below is the code snippet: <script type="text/javascript"> var guildID = "<%= guild.id %>"; let data = {so ...

javascriptnode.jsajaxexpresspost

Verify the validation of the text box

Checking a textbox control for validation is necessary. Validation Criteria: Value should be between 0 and 1000, with up to 2 decimal places (e.g. 1.00, 85.23, 1000.00). Once 2 decimal points are used, users should not be able to enter additional ze ...

javascriptasp.netvalidation

Error encountered in Node/Express application: EJS partials used with Angular, causing Uncaught ReferenceError: angular is not defined

I seem to be missing something important here as I attempt to incorporate ejs partials into a single-page Angular app. Every time I try, I encounter an Uncaught ReferenceError: angular is not defined in my partial. It seems like using ejs partials instead ...

javascriptangularjsnode.jsmean-stack

Terminate a targeted recipient following the completion of the on event

I am currently running a node service with socket.io and utilizing an event emitter to send updates based on user context. For example, context A may have users 1, 2, and 3 while context B has users 4 and 5. Once a successful connection is established wit ...

javascriptnode.jssocket.iodom-events

The Shell Application is not refreshing React HtmlElement Micro Front end

I am currently facing an issue when trying to inject the following React MFE into another Angular shell application. The MFE loads successfully the first time, but if it is hidden or removed from the DOM and then reloaded, it fails to load. Could you plea ...

javascriptreactjsangularmicro-frontendhtmlelements

How to efficiently use promises within loops in JavaScript

I recently delved into Javascript and I'm still struggling with how promises work within loops. Currently, I am utilizing repl.it db for my project. Let's say I have an array consisting of keys, and my goal is to query each key in the array to st ...

javascriptnode.jsdiscord.jsreplit

Please elaborate on the appropriate application of angularjs Directives in this specific scenario

From my experience with Angular, I've learned that directives are used for manipulating the DOM while controllers are more about controlling functionality. I've been struggling to convert a small wizard into generic directives, aiming for reusab ...

javascriptangularjsangularjs-directive

Creating a method for a Discord Bot to communicate through a Webhook (loop)

I am looking to enhance my bot's functionality by implementing a webhook triggered by a specific command. Once activated, the webhook should send a message at regular intervals. The idea is to obtain the token and ID of the created webhook, and then ...

javascriptnode.jswebhooksdiscord.js

unable to show image retrieved from JSON data

Looking to showcase the data from my JSON objects, which are displayed in 2 images below https://i.stack.imgur.com/yhqFy.png https://i.stack.imgur.com/DUgFO.png In the data, I have properties like c_name, max_slots, and an array slots. Within the array, ...

javascripthtmlangularjsjson

The value remains constant until the second button is pressed

I have a button that increments the value of an item. <Button bsStyle="info" bsSize="lg" onClick={this.addItem}> addItem: addItem: function() { this.setState({ towelCount: this.state.towelCount - 2, koalaCount: this.state.koalaCount + 2 ...

javascriptreactjsfirebasereactfire

Navigating the world of date pickers: a deceptively easy challenge

Take a look at this fiddle example to get started: http://jsfiddle.net/1ezos4ho/8/ The main goals are: When a date is selected, it should be dynamically added as the input value, like <input type text value="date selected".... Update: <s ...

javascriptjqueryajaxhtml