Update the styling of buttons in CSS to feature a unique frame color other

Can anyone help me with styling Bootstrap buttons and removing the blue frame around them after they're clicked? Here's what I've tried:

https://i.stack.imgur.com/jUD7J.png

I've looked at various solutions online suggesting to use "outline:none", but it doesn't seem to work for me. My CSS code:

    .btn {
    color: white;
    border-radius: 0px;
    background-color:rgba(124, 122, 119, 0.405);
    border-color: rgba(255, 165, 0, 0.405);
    margin: 15px;
    max-width: 30%;
    max-height: 30%;
    outline: 0;
}

.btn:hover{
    border-color: white;
    background-color: rgba(190, 123, 34, 0.514);
    outline: 0;
}

.btn:focus{
    border-color: white;
    background-color: rgba(255, 166, 0, 0.418);
    outline: none;
    border: 0;
}

.btn:active {
    border: 0;
    outline: 0;
}

I've tried using different variations of the outline property without success. Any insights would be appreciated. Here's the HTML code for the button if it helps:

<button type="button" class="btn btn-primary" (click)="decrementStep()">Back</button>

I'm also struggling to change the button's background color when it's clicked. Is there a way to do this in Angular using Bootstrap? Any help or guidance is greatly appreciated, as I am new to frontend development. Thank you!

htmlcssangularbootstrap-4

Answer №1

The appearance of a blue border can be attributed to the btn-primary class. To remove it, you will need to customize the border color and box shadow (as well as eliminate the outline just in case):

.btn.btn-primary {
  border-color:transparent !important;
  box-shadow:none !important;
  outline:none !important;
}

Check out this example on Bootply

Answer №2

If you want to disable it, apply this specific CSS rule: 

.btn:focus {
    box-shadow: none;
}

The blue frame is not created using an "outline", but rather the box-shadow property.

Answer №3

One possible solution is to perform a reset on the Input...

Certain HTML elements come with their own preset properties that can vary from browser to browser.

Here's some helpful information regarding the "reset" procedure: Resetting Forms

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

Arrangement of items in Angular 2 array

Received a JSON response structured like this JSON response "Terms": [ { "Help": "Terms", "EventType": "Success", "Srno": 1, "Heading": "Discount Condition", "T ...

angulartypescriptngfor

Tips on setting the first root element to automatically expand in a tree component

Currently, I am utilizing a tree component that includes partially loaded data. For reference, here is the link to the stackblitz example: StackBlitz. Is there a way for me to have the child element of the first root element automatically opened by defau ...

angularangular-material

The CSS media query isn't functioning properly on Safari browser

Currently, I am working on a project using React JS and CSS. In order to make it responsive, I have implemented media queries. However, I have encountered an issue where the media query is not functioning properly in Safari browsers on both phones and PC ...

cssreactjssafariresponsive-designmedia-queries

Clicking the delete button in Firebase to remove an item

I am in the process of developing a simple CRUD application and have opted for Firebase as my backend solution. While I have successfully implemented the create and read functionalities, I've hit a roadblock with the delete operation. When attempti ...

javascripthtmlfirebasegoogle-cloud-firestore

Active Class in Angular Dynamic Carousel

I recently set up a dynamic carousel that pulls images directly from a node backend. While everything seems to be in working order, I've run into an issue where all the images are being displayed at once instead of sliding through one at a time. This ...

angularslidercarousel

What is the process of associating components with a specific tag in Angular?

Here is the structure of my angular-electron application that I'm currently working on. Take a look at it here. Within the dynamic area or tag, I aim to bind various components based on the selection of list items in the side-nav component. These com ...

angularangular2-routingdynamic-binding

focusing on two different sections with a single hover effect

Is it possible to modify the styles of two different divs using CSS when hovering over one div? #down-icn { position: absolute; bottom: 0; right: 25px; color: #fff; -webkit-transition: color 0.25s ease; border-color 0.5s ease; -moz-transition: colo ...

htmlcss

Generate additional tabs

Currently, I am in the process of working on a project where I have a bar that will contain dynamically filled tabs. My goal is to include a (+) image that becomes visible when the bar is full. When a user clicks on this image, the remaining tabs should ap ...

jqueryhtmlcss

Interactive input field designed for modifying, adding, and removing data in MySQL

I am working on a project where I have a simple form. However, I need to dynamically change the form action from insert to update within the same page. Additionally, I also want to display the values on the same page. Within my code, I have set up the up ...

phpjavascriptjqueryhtmlajax

JavaScript opacity adjustments not achieving desired outcome

My attempt to make this sub menu fade in and out upon button press is not working as expected. It should fully fade in shortly after clicking 'help' and completely fade out when clicking 'back'. Is the problem with the method I'm u ...

javascripthtmlcss

Issues with the code: $("input[type=checkbox]:checked").each(function() { var checkboxId = $(this).attr("id"); });

When submitting a form, I need to retrieve the IDs of all checked checkboxes. Currently, $(this).id() is causing an error. What is the correct code to obtain the IDs of all checked checkboxes? $("#pmhxform input:checkbox:checked").each(function() { ...

javascriptjqueryhtmlvalidation

Executing PHP code on button click in HTMLThe process of running a PHP script when

I am currently working on a project that involves detecting facial expressions using Python. However, I need to pass an image to this code through PHP. The PHP code provided below saves the image in a directory. How can I trigger this code using an HTML ...

javascriptphppythonhtml

Increase the totalAmount by adding the product each time

Can someone help me understand why the totalAmount shows as 20 when I add a product? Also, why doesn't it increase when I try to increment it? Any insights would be appreciated. Thank you. ts.file productList = [ { id: 1, name: 'Louis ...

javascriptangulartypescriptcart

Mastering the art of obtaining XPaths through Selenium WebDriver

While working on test automation for a section of Outlook Web App, I focused on checking a designated test mailbox that receives emails from our company. I needed to verify specific texts within an email using Assert, but encountered difficulty in identify ...

javahtmlseleniumselenium-webdriverxpath

Optimizing the appearance of an unordered horizontal list in the most effective manner

When attempting to make lists horizontal and hide default bullets, is it necessary to apply {display:inline} and {float:left} to both the <li> tags or would just one of these properties suffice? <ul> <li><a href="#">First item< ...

htmlcssxhtmlhtml-lists

When working with Angular, the onSubmit method may sometimes encounter an error stating "get(...).value.split is not a function" specifically when dealing with Form

When the onSubmit method is called in edit, there is an error that says "get(...).value.split is not a function" in Form. // Code for Form's onSubmit() method onSubmitRecipe(f: FormGroup) { // Convert string of ingredients to string[] by ', ...

htmlangularformssplit

Dockerized Angular CLI app experiencing issues with hot reload functionality

My existing angular cli application has been dockerized with the following setup: Dockerfile at root level: # Create a new image from the base nodejs 7 image. FROM node:7 # Create the target directory in the imahge RUN mkdir -p /usr/src/app # Set the cr ...

angulardockerangular-cli

Can a single SVG file be referenced and reused multiple times in a project?

Instead of repeating these code blocks: <svg class="icon-user"> <use href="LONGFILENAME.svg#icon-user"> </use> </svg> <svg class="icon-user2"> <use href="LONGFILENAME.svg#icon-user2"> </use> </ ...

htmlcsssvg

"Angular application does not have a reference to elementRef after completion of build

I have encountered an issue with my component template. I am trying to select an SVG element using ElementRef and it seems to work fine. However, when I build the app and open it, the elementRef is null. @Component({ selector: 'app-svg&apos ...

angulardomelementref

Three divs are set in place, with two of them of fixed width while the third div is

Looking for a layout with specific positioning and fixed widths: One box on the left, one box on the right, each with a width of 200px. The middle div should adjust to take up the remaining space. Any suggestions are appreciated. Thank you! ...

javascriptjqueryhtmlcss