Removing outlines on <p> <a> or <div> elements with Ionic and Angular seems to be a challenging task

Hey there, I’m currently working on my application which includes a login page. I've implemented a “Forgotten password ?” link, but no matter what I try, like using .class and :focus {outline: none}, I still see a yellow square around the item. Interestingly, this issue only occurs in my Android application but not in my browser.

<a class="pass" [routerLink]="['/forgotten-pass']">Mot de passe oublié ?</a>

If anyone has encountered this problem before and found a solution, I would greatly appreciate your help!

Thank you

Check out this image for reference

htmlcssangularionic-framework

Answer №1

This is how I solved it:

:focus{
    outline: -webkit-focus-ring-color automatic 0px;
 }

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

How to Keep PHP Include Visible within the div using Bootstrap 4

I utilized PHP include to add the information inside the modals for the albums, but it is not hidden as specified in the div class where it is included. You can check out the music page on . However, here is the code snippet for the music page where I in ...

phpajaxhtmlbootstrap-4

When the browser window is minimized, the top section of the website becomes concealed

For the past few weeks, I have been working on creating a new website. The progress is looking good overall, but there is one issue that I have encountered. When viewing my website in a browser window smaller than the actual webpage size, the top menubar ...

htmlcsshidemargincenter

Angular2 date input field unable to restrict minimum and maximum dates

Having trouble with dynamic min and max attributes not being recognized in ionic2 when using the 'datetime-local' type. <ion-input value="" type="datetime-local" [formControl]="expdate" [attr.min]="mindate" [attr.max]="maxdate"></ion-in ...

angularionic2

Delete a designated section from a URL with the power of jQuery

I have a URL like http://myurleg.com/ar/Message.html and I need to change ar to en in it when clicked on. For example, if my current URL is: http://myurleg.com/ar/Message.html After clicking, it should become: http://myurleg.com/en/Message.html I attemp ...

javascriptjqueryhtml

Is it necessary to download and install plotly if I am using the cdn in my HTML file?

I'm currently developing an online application using Flask. The user input is collected with d3.js and sent to app.py, where it is used for an API call to retrieve the necessary data. This data is then returned in JSON format to JavaScript for renderi ...

javascriptpythonhtmlflask

Converting a stringified array object to an object using Expressjs

When working with Angular, I am sending stringified data using FormData. Here is an example: this.formData.append('data', JSON.stringify(this.collections)) Now my challenge is converting this string back to an object in my Express backend. The d ...

javascriptnode.jsjsonangularexpress

Guiding you through the process of dynamically defining a port in proxy.conf.json or proxy.conf.js

Starting my Angular4 application for development involves running npm run start, where start is defined as "start": "ng serve --proxy=proxy.conf.json". Within the proxy.conf.json file, I have: { "/api/**": { "target": "http://localhost:80 ...

node.jsangularangular-cli

Strange actions observed in JavaScript addition operations

In my Angular application, I have the following TypeScript function: countTotal() { this.total = this.num1 + this.num2 } The value of num1 is 110.84 and the value of num2 is 5.54. I determined these values by watching this.num1 and this.num2 in the C ...

javascriptangulartypescriptmath

Having difficulty with setting up the Webpack css-loader, encountering an error during compilation

As a newcomer to webpack, I have been experimenting with creating my own build by modifying an existing one. One issue I encountered was the css not compiling, so I took the following steps: Confirmed that there were no css loaders already included in th ...

javascriptcssnpmwebpackcss-loader

CSS not being properly rendered on newly inserted row within table via jQuery

I'm currently working on a table that allows users to select rows, and I've implemented some CSS to highlight the selected row. The issue arises when new rows are added to the table as they do not get highlighted when selected. HTML Portion: &l ...

javascriptjqueryhtmlcss

What steps do I need to take to update Oceania to Australia on Google Maps?

While incorporating the Google Maps API into Angular, an issue arises when zooming out completely: https://i.stack.imgur.com/oZRut.png The label is displaying "Oceania" instead of "Australia". Is there a feasible method to modify this discrepancy? ...

angulargoogle-mapsgoogle-maps-api-3

Are you a skilled UI Designer looking to work with JHipster?

Just starting out with JHipster and I've generated my first Angular 2 project using JHipster 4.5.1. It's been an amazing journey so far! Now, I'm looking to customize the default JHipster generated Angular 2 pages and create my own custom p ...

twitter-bootstrapangularjhipster

Angular allows for the creation of a unique webpage layout featuring 6 divs

I am working on a project where I have an image of a car and I need to overlay 6 divs onto the image which can be selected with a mouse click. When a user clicks on one of the divs, it should change color. I've attempted using z-index, but it doesn&ap ...

htmlangular

Having trouble with the initial tap not being recognized on your mobile browser?

When using mobile web browsers (specifically chrome and firefox on iOS), I am experiencing an issue where the hamburger menu does not trigger when tapped for the first time. For a simplified version of the HTML/CSS/JS code, you can check it out at: https ...

javascripthtmlcssmobile

Clicking on the sub kendo panelbar item activates the parent kendo panelbar item

Utilizing a Kendo Angular UI panelbar within the sidepanel as a treemenu with submenu's, each item is linked to the Angular router routes array via routerLink. An issue arises when opening the submenu, where the parent menuitem's path is followe ...

angularkendo-ui-angular2

Floating point expansion caused by the addition of padding

Currently working on a basic 2 column layout design for a website, but ran into a hiccup. Whenever I try adding padding to the left-floated column, it ends up expanding beyond the width that I have set. Unfortunately, I haven't been able to find a sol ...

htmlcsscss-floatpadding

Enhanced customization of material-ui styles

After exploring various resources on styling overrides, I encountered a unique challenge. I am engaged in crafting styled material-ui components and integrating them across different sections of my application. My objective is to enable the customization o ...

cssreactjsmaterial-ui

The picture within the div is not appearing as expected

I am facing an issue with inserting an image in a div container using CSS and HTML. The image is not displaying properly. Here is the HTML code: <div id="wrapper"> <div id="quoteContainer"> <span class="start_img"></span> </di ...

cssimagehtml

What is the best way to center align tabs in a Bootstrap 4 list?

I am working with tabs structured like this: <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> <li class="nav-item"> ...

htmlcssbootstrap-4

Enhancing Angular Material forms with custom background colors

I'm new to Angular and Angular material, still learning the ropes. I have been trying to create a form and needed to change the background color to Red. However, when I attempted to do so, the red color ended up covering the entire form instead of ju ...

angulartypescriptangular-material