Prevent ui-select from being highlighted when clicked

here's a dilemma :
(all in angular 1)

I'm using a ui-select like this :
https://i.stack.imgur.com/RzH2u.png

Here's the code snippet : 

<div class="formZone-group">
    <div class="mandatory-fl">
        <div class="mandatory-field">
            <label class="control-label">{{atlasManagement.getText("#ATLAS:ATTRIBUTE")}}  <i class="glyphicon glyphicon-info-sign help-icon" aria-hidden="true" tooltip-placement="right" tooltip="{{atlasManagement.getText('#ATLAS:ATTRIBUTETOOLTIP')}}" tooltip-class="customTooltip" ng-show="atlasManagement.viewManager.isActiveView(atlasManagement.constants.views.addAtlas, atlasManagement.constants.views.updateAtlas)"></i></label>
        </div>
        <div class="mandatory" ng-show="atlasManagement.viewManager.isActiveView(atlasManagement.constants.views.addAtlas, atlasManagement.constants.views.updateAtlas)">*</div>
    </div>
    <div class="select-container">
        <div class="selectPlaceHolder" ng-show="!atlasManagement.atlas.attributeIsDefined()">{{atlasManagement.getText('#ATLAS:CHOOSEATTRIBUTEPLACEHOLDER')}}</div>
        <ui-select  tagging tagging-label="false" on-select="atlasManagement.onAttributeSelected($item, $model)" ng-model="atlasManagement.atlas.attribute" theme="select2" ng-disabled="atlasManagement.viewManager.isActiveView(atlasManagement.constants.views.details)">
            <ui-select-match>{{atlasManagement.getText($select.selected.title)}}</ui-select-match>
            <ui-select-choices repeat="item in atlasManagement.attributes | orderBy: atlasManagement.orderByFactory('title') | propsFilter: { title : $select.search }:atlasManagement.getText | orderBy: atlasManagement.orderByFactory('title')">
                <div ng-bind-html="atlasManagement.markText(atlasManagement.getText(item.title), $select.search)"></div>
            </ui-select-choices>
        </ui-select>
    </div>
</div>

I need to remove the highlight when clicked...

Thank you in advance!

javascripthtmlcssangularjs

Answer №1

Consider using the outline css property (MDN link):

#myElement:focus {
  outline:none;
}

It's worth considering whether changing this common and standard user behavior is a good idea. Some thoughts can be found here.

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

Create a JavaScript function without attaching it to the global window object

Can someone please help me with defining a function and using it inside Jquery within the $(document).ready block? function addLeadingZero(number) { return (number < 10 ? '0' : '') + number } I'm not confident that I ha ...

javascriptjquerywindow

Unable to locate the sibling element using CSS Selector with Selenium

When using a CSS Selector to click on the next sibling element in Selenium WebDriver, an InvalidSelectorException is thrown. If we consider my DOM structure: <div class="checkbox-group"> <div> <span class="checkbox">::aft ...

cssseleniumselenium-webdrivercss-selectorsautomated-tests

How do I change the alignment of X axis labels in an Asp.net chart to be left-aligned instead of centered?

I've been struggling for hours trying to figure out this simple issue. I am working on creating a histogram using the asp chart control. My main problem is that I can't seem to get the x-axis label to appear on the left side of each column instea ...

c#cssasp.netchartshistogram

After activating the rewrite feature on Tomcat valve, JavaScript is loading twice

I've implemented the Tomcat rewrite valve in my single-page application to direct all requests, except for static resources, to my index.html file. Here is what my rewrite.config looks like: RewriteCond %{REQUEST_URI} (?!.*\.(?:jpg|png|css|js|js ...

javascriptjquerytomcaturl-rewritingtomcat-valve

JavaScript code to verify if a checkbox is selected

Having some trouble making a text box value change based on checkbox status. I've attached a function to the onclick event of the checkbox, but it's not quite working as expected. <div> MyCheckbox <input type="checkbox" id="Check1" name ...

javascripthtmlcheckbox

The connection between `this` and its calling context

Is all information from its call site accessible to a function? I was under the impression that a function would have access to the scope of its call site, but I could be mistaken. Any feedback and explanation would be greatly appreciated. function bar() ...

javascriptobjectbindingthis

Is there a way to use ajax to dynamically monitor the presence of a file in real-time?

Is there a way to automatically observe the status of a file using ajax without having to manually refresh it with a button? ...

phpjavascripthtmlajax

Setting the title of the master page body dynamically

Looking for a solution similar to the one discussed below, I am attempting to extract the title entered in the title tag on each page and use it to update an asp label dynamically to display the title on each page. My goal is to achieve this using only C# ...

c#htmlasp.net

Retrieving data from external JSON files

I implemented this JavaScript code to retrieve JSON data from an external server. The JSON data gets loaded from the server, but I'm unsure how to extract markers from the Google Map using this external JSON data. var map, infowindow; //// // Fet ...

javascriptjqueryjsongoogle-mapsgoogle-maps-api-3

Accessing a hyperlink in an alternative browser

Is there a way to transfer a link from one browser to another? For example, moving a link from Firefox to Chrome or from a Chrome Incognito window to a regular Chrome window. Let me provide more context. I have a webpage that refreshes every second and us ...

javascriptjquerybrowserhyperlink

Parse the HTML document using an HTTP request to access the Document Object Model (DOM)

I am facing an issue with accessing elements of an HTML page through JavaScript. I have tried different methods, but I keep getting the error message: CORS header "Access-Control-Allow-Origin" missing. Here is the code snippet I tried: <!DOCTYPE html&g ...

javascriptajaxapirestxmlhttprequest

What are the steps to make the chosen title and its content active while deactivating the others?

I am currently developing a website for an educational institution that includes schools with subdivisions such as matric, CBSE, and state board, as well as a college. My goal is to create a user interface where clicking on a specific stream (such as matri ...

jqueryhtmlcsstwitter-bootstrapnav-pills

Having trouble embedding the video in an iframe. Any tips on how to make it work?

I have encountered an issue while trying to embed a video in my WordPress site using an iframe. The video is not displaying completely on the page, with only the left part visible and the rest being cut off. Here is the code I am currently using: <P A ...

htmlcssvideoiframeembed

Including an extra day in an array to ensure proper date formatting in Angular

Within my Angular project, there exists an array structured as follows: Thali : [ {"date":"2017-04-09T18:30:00.000Z","isHoliday":"100"}, {"date":"2017-04-10T18:30:00.000Z","isHoliday":"101"} ] Upon selecting a date from the date picker, such as the f ...

angularjsarraysdate-formatisodate

Create your masterpiece on a rotated canvas

My goal is to draw on a canvas using the mouse, even after rotating and scaling the canvas container. The issue I am facing is that the mouse coordinates get affected by the rotation and scaling, making it difficult to draw correctly. I have tried switch ...

javascripthtmlcanvashtml5-canvas

Using Flask's post method with AngularJS

As a newcomer to using Flask, I've been attempting to create a function that handles a post request. However, I'm encountering an issue where the angular controller always returns an error or if there is no error, I am unable to access the data s ...

pythonangularjsflask

How can I implement a Component to show the details of a blog post when clicked in Next.js?

Can someone help me figure out how to display individual blog post details in a modal when clicked on in a blog website, where the posts are stored in a Component rather than pages? The file structure is set up like this: Component |_ Posts.js |_ PostDet ...

javascriptreactjsnext.js

Adjust SVG size as per parent container in AngularJS custom directive

I have a unique situation where I am integrating an angular directive into a dynamically-sized element. The directive itself is made up of an SVG which adjusts based on the size of the container. I am working on making sure the SVG automatically resizes an ...

javascriptcssangularjssvgcross-browser

Embed Socket.IO into the head tag of the HTML document

After working with socket.IO and starting off with a chat example, my chat service has become quite complex. The foundation of my code is from the original tutorial where they included <script src="/socket.io/socket.io.js"></script> <scrip ...

javascripthtmlnode.jssocket.io

Tips for enhancing a table with extra functionality in Angular 6

Hi there! I've created a table using Angular 6 and now I'm looking to enhance it with some extra functionality: Implement an overall table search feature Allow users to sort the table by columns Add a "Page x of n" option for pagination I woul ...

htmlcssangulartypescriptangular-ngmodel