Eliminate the link outline in p:tabView

How can the outline be removed when a user clicks on one of the tabs in <p:tabView>?

Attempts to set it in CSS were unsuccessful.

a {
    outline: 0 none !important;
}

Shown below is a screenshot of the issue.

Answer №1

The li element has an outline added when it is clicked and picks up the .ui-tabs-outline class. If you want to change the appearance of the outline, you can override the outline property within the class:

li.ui-tabs-outline {
  outline: none;
}

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

Styling with CSS: How to Show an Absolutely Positioned Element in Google Chrome

I'm currently working on a CSS design that involves positioning an image within a span tag. Here's the CSS code I have: .dc-mega-icon { background-image: url(...); display: inline-block; position: absolute; top: 18px; width: ...

What are some effective strategies for preventing CSS duplication?

What is the best way to prevent repeating CSS code like this: div#logo div:nth-child(1) div { width: 30%; height: 30%; background-color: white; } div#logo div:nth-child(3) div { width: 30%; height: 30%; background-color: white; ...

Change the color of specific elements in an SVG using React

Can I change the dynamic primary color from ReactJS to a specific class in an SVG file? If yes, how can it be done? Error.svg <!-- Generator: Adobe Illustrator 26.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1&qu ...

The header appears distorted on older versions of Internet Explorer, specifically IE 7 and IE

The website I am currently working on looks great in Chrome, Firefox, Opera, and Safari on both Mac and Windows. However, it is not displaying correctly in IE 7 & 8. The header should appear like this: But in Internet Explorer, it's showing up like t ...

Repairing a CSS file for Internet Explorer versions 7, 8, and 9

Does anyone have experience with troubleshooting HTML5 CSS3 layouts across different browsers? I recently created a website layout from scratch that looks perfect in Firefox 5, Safari 5.1 and Chrome 12 on Mac. However, when using tools like Adobe BrowserL ...

Does text alignment apply to one tag but not the other?

Hello, I am in the process of creating a basic webpage and encountering some formatting issues. When I apply the style format to one element, it aligns perfectly, but for another element it doesn't seem to be working. I'm certain it's a simp ...

Creating a toggle label using just CSS: a step-by-step guide

Recently, I was trying to create a toggle label using HTML, CSS, and JavaScript. Here is the code snippet that I experimented with: function genre_itemclick(item){ if(item.classList.contains('light_blue_border_button')) { ...

Is there a way to effectively rotate an image according to the position of my cursor, ensuring it functions correctly?

After an extensive search for similar questions, I have come across only one relevant resource which can be found here. While attempting to implement the code mentioned above, I encountered numerous failures in my individual efforts. I am pleased to prov ...

I am unable to switch my carousel to full-screen mode

I'm struggling to make the carousel fullscreen even though I've set the width to 100%. Bootstrap was used in this project. Any help would be appreciated. Thank you! <html> <head> <link href="homepage.cs ...

Ways to adjust the height of one panel based on the height of surrounding panels

I have a layout with three panels: two on the left side and one on the right. <div class="row"> <div class="col s6"> <div class="panel"> content1 </div> <div class="panel"> ...

Is it possible to use HTML code as content in CSS?

How do I go about displaying the variable $text as HTML? Take a look at the code snippet provided below: <?php header('Content-type: text/css'); $background = "#ffafff"; $color = "#000000"; $green = "#16a86f"; $text= '<h1&g ...

The form-group nested within a form-horizontal is exceeding the boundaries of the preceding form-group

I am currently utilizing Bootstrap 3.3.6 and have a basic form enclosed in a panel: https://i.stack.imgur.com/UOFI6.png Although it is quite simple, the alignment of the "Post" button is not displaying properly. Here is the HTML code for the form: < ...

Issue with Material Design Lite input floating label not functioning properly post page navigation

I am currently developing a mobile hybrid application using Material Design Lite, but I have run into a small issue. When I add input field elements to my pages, the floating text and placeholder do not function properly. In my application, I am utilizing ...

What is the reasoning behind setting the perspective to 1000 for carousel items in Bootstrap?

While working on customizing the bootstrap carousel, I came across this code snippet: .carousel-inner > .item { -webkit-transition: -webkit-transform .6s ease-in-out; -o-transition: -o-transform .6s ease-in-out; transit ...

Firefox failing to display CSS files on web pages

My project is deployed on IIS 7.5 and when trying to access it from a different machine using Firefox, all files are rendered except for the CSS files (although they work fine in IE). I have checked that the MIME type for .css files is correctly set up in ...

Is there a way to display a foundation.css drop-down menu using jQuery?

After attempting to create a navigation bar using foundation.css, I encountered an issue where the sub-menu does not appear when hovering over it with the mouse. The main question at hand is how to display the sub-menu of test on this specific webpage. D ...

Guide to designing a dropdown navigation menu in GWT

Hey, I'm currently working on setting up a drop down menu using GWT and here's the layout I have in mind: | Categories | Pictures | Other | When the categories dropdown opens, my goal is to display the categories grouped in pairs. For example: ...

The presence of the `class` attribute on the `td` element

Is there a reason why the rows with the "odd" td class in this script do not toggle to blue like the rows without the "odd" class? EDIT: When you click on a row (tr), it is supposed to turn blue (.hltclick) and return to its original color when clicked ag ...

Flip the Script: JQuery slideshow in reverse

Hey there, I've been tinkering with a JQuery slideshow and encountering an issue. All my images in the HTML are stacked on top of each other, and I attempted to modify the code so it starts with the last image. However, my attempts have not been succe ...

How can I force an element to overflow without being affected by its parent's overflow style in CSS/HTML/JS, even if the parent is

I've come across many inquiries on this subject, but the proposed solutions never seem to work when dealing with ancestors that have absolute positioning. Take this example: <div id='page'> <div id='container' style= ...