.button , button{
border:solid black 2px !important;
}
Using this code, I have added a border to all buttons. But now, I need to exclude the buttons "searchsubmit" and "single_add_to_cart_button" from having a border. How can I achieve that?
.button , button{
border:solid black 2px !important;
}
Using this code, I have added a border to all buttons. But now, I need to exclude the buttons "searchsubmit" and "single_add_to_cart_button" from having a border. How can I achieve that?
It's really not that hard.
There are actually two ways to achieve this, but the simpler option is definitely recommended!
.noBorderButton{
border: none !important;
}
In your HTML code, simply add the class "noBorderButton" to your buttons.
<button class="noBorderButton">Submit Form</button>
Keep in mind to always follow CSS overwriting rules, meaning place the .noBorderButton CSS below the Button CSS.
UPDATE: It seems Martin has pointed out that removing the button's border completely may interfere with user agent styles, which is probably not what you want either!
If that's the case, consider the following alternative:
button:not(.noBorderButton){
border: solid black 2px !important;
}
Once again, remember to include the class 'noBorderButton' on any buttons where you don't want this specific styling to apply.
If those are indeed your class names, you can simply include border: none !important to remove the borders.
button.searchsubmit,
button.single_add_to_cart_button {
border: none !important;
}
Here is a quick solution:
Class:
.newsearchsubmit {border:none;!important}.updated_add_to_cart_button {border:none;!important}Id:
#newsearchsubmit {border:none;!important}#updated_add_to_cart_button {border:none;!important}This may not be the cleanest code, but it gets the job done... :)
Utilize the 'not' css selector for more specific styling.
.button , button:not(.searchsubmit):not(.single_add_to_cart_button) {
border:solid black 2px !important;
}
To easily achieve this, you can utilize the :not selector to exclude those buttons that have specific classes:
.button, button, button:not('single_add_to_cart_button'), button:not('searchsubmit') {
border: solid black 2px !important;
}
Alternatively, you could approach it from a different angle, although I do not recommend it—by adding a border to a button and then removing it:
button.searchsubmit, button.single_add_to_cart_button {
border: none !important;
}
(Keep in mind that the above styles should be placed after your initial .button and button styles to ensure they take precedence)
I am encountering an issue with a flag that I am toggling between true and false to alter the display of certain elements on my page. While it works outside of the template, integrating this value into the template itself has proven challenging. restrict: ...
Is this the right place to ask how the voice-activated search feature on Google's homepage functions? I'm curious about whether it utilizes Flash, a plugin integrated into Google Chrome, or some other method to access the microphone. The idea of ...
I've encountered an issue with my Javascript program that extracts data from a text file and displays it in a table. The problem arises when I update the text file - the changes don't reflect on the table because the browser is caching the file. ...
I attempted to create a full-width accordion with the following code: .page { margin: 0; padding: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 100vh; } .content { -webkit- ...
I am working with a Handlebars template to display an array of movies in a table with four columns. Currently, I have set up a HBS helper in my code: app.engine('handlebars',exphbs({ defaultLayout: 'main', helpers: { n ...
In order to create a simple framework with jQuery style, I have written the following code: (function(window) { window.smp=function smpSelector(selector) { return new smpObj(selector); } function smpObj(selector) { this.length = 0; if (!s ...
What is the best way to create a small border in the center of an h1 text element? ...
I'm in the process of creating my online portfolio by using bootstrap and jquery. I have a series of images arranged side by side with each other, and I want to make the description for each image appear when that specific image is hovered over. Each ...
If the status of this task is 'Completed', I would like to hide the button (similar to adding a display: none property). Code: <Button size="small" style={{display:this.state.task.status == "Completed" ? "none":""}} ...
Question : var str = "I have a <animal>, a <flower>, and a <car>."; In the above string, I want to replace the placeholders with Tiger, Rose, and BMW. <animal> , <flower> and <car> Please advise on the best approach ...
I'm currently working on a project for my homework that involves replicating a car brand page, but I've hit a roadblock at this particular section. https://i.stack.imgur.com/0Zfr5.jpg My goal is to recreate the gallery using a .container with n ...
After some observation, I have realized that when a button is placed inside a form but has no connection or function related to the form, such as a back or cancel button, it unexpectedly reloads the entire page. For instance, let's consider having ...
Creating a website with a dropdown menu and slider division can be tricky. When hovering over the menu, the submenu displays but causes the slider division to shift down. Does anyone have suggestions on how to fix this issue? Below is the code: <html& ...
I am facing a challenge with my HTML layout. In Chrome, when the horizontal scroll bar is visible, a vertical scroll bar also appears. However, in Firefox, everything works fine. This issue seems to be related to the height of the div not auto-scaling prop ...
I need a way to showcase a collection of around 30 links in a horizontal layout without the links wrapping to a new line if they exceed the width of the parent container. A horizontal scroll should appear for users to navigate through the overflowing links ...
What is the most effective way to register a stylesheet only once on a page using a custom web control? Keep in mind that the page utilizes an UpdatePanel for asynchronous calls. I attempted placing the <link> tag in ScriptManager.RegisterClientScrip ...
Looking to create a dynamic list where users can easily add new items by clicking a button. As each item is added, a corresponding remove button should also be displayed. The issue I'm facing is that every time a new item is added, an extra close but ...
As I work on designing a straightforward website, I find myself grappling with CSS and particularly inheritance. My objective is to create a side menu where items are stacked vertically: #inner-flex-container { display: flex; flex-direction: column; ...
I currently have a table with an empty body: <table id="tablem" border="1" width="100"> <thead> <tr> <th style="width: 10%">PageName</th> <th style="width: 5%">Lang</th> ...
Being new to the world of Watir and Cucumber, I am currently in the process of running an automation script to create Live IDs. The link that I want to click on the webpage is labeled "New" and it should take me to a form where I can add a new contact for ...