Is it possible to customize the appearance of these buttons using CSS to change their color, text color, etc?

Looking to customize the buttons on a site that uses templates that can't be modified directly. I have to rely on a CSS file to style the elements as the buttons are created using tables within table cells. How can I change the background color of the buttons? I managed to make the borders thicker on hover, but the grey background persists regardless of my attempts to modify it.

My code:

.bntBgB {
    background-color: #122d98;
}
.bntBgB:hover {
    background-color: #122d98;
    border-width: 0.2rem;
}
.bntBgT {
    background: none;
    border: solid 1px #384e86;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    font-family: "Roboto-Light";
    font-size: 0.875rem;
    font-weight: 300;
    letter-spacing: 0.04688rem;
    margin: 0;
    max-width: 300px;
    outline: none;
    padding: 0.6em 0 0.75em;
    text-decoration: none;
    transition: background 0.25s ease;
    white-space: nowrap;
    margin-right: -10px;
}
.bntBgT:hover {
    background: #031136;
    border: solid 1px #8fa0ca;
    color: #fff;
    text-decoration: none;
}
<table id='tbl_secondarycustbtn_set_prim' cellpadding='0' cellspacing='0' border='0' class='uir-button' style='margin-right:6px;cursor:hand;' role='presentation'>
    <tr id='tr_secondarycustbtn_set_prim' class='pgBntG'>
        <td id='tdleftcap_secondarycustbtn_set_prim'><img src='/images/nav/ns_x.gif' class='bntLT' border='0' height='50%' width='3' alt='' />
            <img src='/images/nav/ns_x.gif' class='bntLB' border='0' height='50%' width='3' alt='' /> </td>
        <td id='tdbody_secondarycustbtn_set_prim' height='20' valign='top' nowrap class='bntBgB'>
            <input type='button' style='' class='rndbuttoninpt bntBgT' value='Set As Primary' id='secondarycustbtn_set_prim' name='secondarycustbtn_set_prim' onclick="nlFireEvent(getButton('custbtn_set_prim'), 'click'); return false;" onmousedown="this.setAttribute('_mousedown','T'); setButtonDown(true, false, 
this);" onmouseup="this.setAttribute('_mousedown','F'); setButtonDown(false, 
false, this);" onmouseout="if(this.getAttribute('_mousedown')=='T') 
setButtonDown(false, false, this);" onmouseover="if(this.getAttribute('_mousedown')=='T') setButtonDown(true, false,
this);"></td>
        <td id='tdrightcap_secondarycustbtn_set_prim'>
            <img src='/images/nav/ns_x.gif' height='50%' class='bntRT' border='0' width='3' alt=''>
            <img src='/images/nav/ns_x.gif' height='50%' class='bntRB' border='0' width='3' alt=''>
        </td>
    </tr>
</table>

Button Image link: https://i.sstatic.net/V7Lxy.jpg

htmlcss

Answer №1

It's possible that there is an existing inline style or another style with a higher specificity affecting the background color. Use your developer tools to search for the background color to pinpoint the source of the style.

You can also try using !important to override any conflicting styles, but it's not recommended as the first solution.

.bntBgB {
 background-color: #122d98 !important;
}

If using !important resolves the issue, it indicates a specificity problem. If the style is inline, you'll need to use JavaScript to remove it, or you can opt for the important declaration as mentioned above. If it's applied through another style sheet, whether internal or external, you're in luck! Your goal is to outperform the specificity of the conflicting styles.

The concept of 'specificity' is straightforward. Each CSS selector combination is assigned a certain level of importance, with higher values indicating greater precedence over other styles. Refer to the MDN article on specificity for a more comprehensive understanding.

Answer №2

If you're looking to dynamically change CSS, jQuery can help. Check out the code snippet below for adding CSS properties or classes:

To dynamically add a class:

$( "bntBgB" ).removeClass( "myClass noClass" ).addClass( "yourClass" );

To dynamically add CSS:

$("bntBgB").css("background-color");

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

What is the best way to activate the default action/event of an HTML link (anchor element)?

Is there a way to programmatically trigger the default action of an HTML link using JavaScript or jQuery? Essentially simulating a user click on the link. Simply using .click() does not seem to do the trick. $('#alink').click(); // nothing happ ...

javascriptjqueryhtml

"Learn the process of connecting an HTML5 element to Angular 2 source code while in a saving mode

In this Angular2 implementation, I have created some HTML code for user access. However, I am facing an issue where the data is not binding at the Angular2 source code side. HTML Code <form class="form-horizontal" novalidate [formGroup]="EmployeeForm" ...

htmlangular2-forms

Navigating the battleground between native and HTML5 mobile applications

As an experienced iOS developer with knowledge in Windows Phone and Android, I have observed the increasing popularity of HTML5 web-apps over native apps. This shift towards HTML5 development frustrates me, as a strong argument can be made for native app d ...

androidiphoneioshtml

The Angular currency filter is displaying a strange blank space despite the correct syntax being used. Is there anyone who can assist me with this issue?

Hey everyone, I'm having some trouble with the currency filter in Angular. It's not working and just displaying a blank space. I'm new to learning Angular so any help would be greatly appreciated! Here is the code I'm using: <!DOCT ...

htmlangularjs

Showcasing Items Within JSON Object in Angular

I am dealing with a JSON database that contains nested Objects: { "characters2": [ { "campaign":"Menagerie Coast", "index": 1, "name": "Mark Whithershmitz", "portrait": "assets/pics/markW.jpg", "affiliation": "Kryn Dynast ...

htmljsonangularobservable

Implementing css padding to text preceding images

My content includes text and images in a mix, and I wish to add CSS margin to elements that appear directly before and after the images. Unfortunately, the placement of these elements can vary and is beyond my control. The code snippet below demonstrates ...

htmlcss

Tips for showing a value in a disabled text input box

When users access the page, the table should appear as follows: Marks Per Answer Total Marks Marks Remaining (blank text input) 4 4 (blank text inp ...

phpjqueryhtml

Rendering HTML with jQuery using AJAX: Step-by-step guide

Within my webpage, I have implemented a select box that contains a list of various books. The purpose of this select box is to allow the user to choose a book and then click a submit button in order to view the chapters of that book on a separate page. Ho ...

javascriptjquerypythonhtmlajax

Is your dropdown menu malfunctioning with jQuery? (Chromium)

I am currently working on a website that requires the options in the second dropdown menu to change based on the selection made in the first dropdown menu. However, despite the fact that the browser is recognizing the javascript file, it doesn't seem ...

javascriptjqueryhtml

Is it possible for you to simulate the shift key being pressed prior to the event execution?

Is there a way to allow the user to scroll left and right horizontally without having to hold the shift key down? I want to achieve this effect by setting the "shiftKey" variable to true even when it is not physically pressed. Any suggestions on how to ...

javascripthtmlreactjs

Ensuring maximum length validation on input

I am having an issue with the function "checkNumbers()". I am attempting to validate if my input does not exceed 10 numbers; while "isAllowedSymbol()" is functioning correctly, the other one is not. What could be causing this problem? function isAllowe ...

javascripthtmlcss

Employing Visual Composer within WordPress has resulted in the raw JavaScript not being properly applied to my raw HTML code

Sharing some code that functions properly in my browser and I want to implement on my WordPress page: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8> <!-- Getting jQuery --> <script src="http://ajax.goog ...

javascriptjqueryhtmlwordpress

Different Positions in Flexbox/Container

I am trying to create a series of flexbox items that have both an image and content. I want the images to alternate sides within each flexbox item (one on the left, one on the right, and so on), but I can't figure out how to make it work. Any advice o ...

htmlcss

Apply CSS styling (or class) to each element of a React array of objects within a Component

One issue I'm facing involves adding specific properties to every object in an array based on another value within that same object. One such property is the background color. To illustrate, consider an array of objects: let myObj = { name: "myO ...

javascriptcssreactjsalgorithm

Issue with CKEditor within a ColorBox dialog box

Could someone please assist me? I am facing an issue with my HTML page where I have incorporated a ColorBox modal popup. Inside the ColorBox popup, there is a CKEditor. The problem is as described below: In Internet Explorer, the CKEditor functions proper ...

htmlcssckeditorcolorbox

Django works perfectly on local host, but unfortunately, hosting servers are not cooperating

Programming is a new skill for me and I recently created a weather app using Django. The app functions perfectly when I run it locally with the server, but I've encountered difficulties when trying to host it on various platforms. Here is the link to ...

pythonhtmldjangolocalhostweb-hosting

Please ensure that the submit button is only enabled when the passwords match. (jQuery)

I have written a script that automatically notifies users when their new passwords match during account activation. However, I am trying to figure out a way to also enable the submit button with this script. Below is the code I am working with: JS: fu ...

jqueryhtmlvalidation

Locating the xpath of an element directly beneath the opening <body> tag

I'm having trouble finding the xpath for an element that is not associated with any html tags. Please see the attached image for reference. I tried using driver.findElement(By.xpath("/html/body/"));, but it's not working. I need to locate the tex ...

htmlseleniumxpath

Disabling the scrollbar on a modal and enabling it on a custom div within the modal

Looking to create a bootstrap modal with a unique layout? Interested in having two columns that can be scrolled separately? body, html { font-size: 10px } <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_ ...

csstwitter-bootstrapbootstrap-modalbootstrap-5

Tips for maintaining alignment of components within an Angular Material tab:

I am facing an issue with keeping items aligned properly. Initially, I had a form with two Angular Material lists placed side by side, each occupying 6 units and it looked good. However, when I tried to enclose these two lists within a material tab, they e ...

cssangularangular-material