.button , button{
border:solid black 2px !important;
}
With this code I have provided a frame for all buttons. However, I don't want to have a frame for the buttons "searchsubmit" and "single_add_to_cart_button". How do I do that ?
It is not that difficult.
There are two ways ways for that first is simpler and is recommended!
.noBorderButton{
border : none !important;
}
and in your HTML you can add the class "noBorderButton" to your buttons.
<button class="noBorderButton">Search Submit</button>
P.S. Make sure to follow the CSS overwriting rules i.e. write the .noBorderButton CSS below the Button CSS.
EDIT : As I can see Martin suggesting this will change the user agent styling and button won't have any Border at all, and probably you don't want that either!!
You may go with the Following Option
button:not(.noBorderButton){
border:solid black 2px !important;
}
And yes again add the class 'noBorderButton' to those buttons in which you don't want these styling to work.
I believe those are your class names. If yes, then you can add border: none !important.
button.searchsubmit,
button.single_add_to_cart_button {
border: none !important;
}
simply do:
Class:
.searchsubmit {border:none;!important} and .single_add_to_cart_button {border:none;!important}
Id:
#searchsubmit {border:none;!important} and #single_add_to_cart_button {border:none;!important}
It can be cleaner but this works to... :)
you can use the not css selector
.button , button:not(.searchsubmit):not(.single_add_to_cart_button) {
border:solid black 2px !important;
}
It's pretty simple, you can use :not selector to ignore those two button having your specific classes :
.button , button , button:not('single_add_to_cart_button') , button:not('searchsubmit') {
border:solid black 2px !important;
}
or you can do it from a reverse way which i do not recommend, its like you set a border to a button and then you unset it :
button.searchsubmit , button.single_add_to_cart_button {
border: none !important;
}
(ofcourse the style above must be after your .button and button style in-order to override it)
Related
I'd like to target a button which seems to have the same class as another button. Is there a way to differenciate using css when I can't change the html?
On this page the submit button has disappeared but I think it's because I've hidden a button which shares the same class here
Html:
<button type="submit" class="btn button ur-submit-
button">
<span></span>Submit</button>
I could see common class .btn having following properties:
.btn.btn {
color: transparent! important;
background: transparent! important;
border: none! important;
}
Try adding your class selector which is .ur-submit-button to override hidden property for your class, by adding the following CSS:
button.btn.button.ur-submit-button {
color: initial !important;
/* background: initial !important; */
/* border: initial !important; */
}
It will display the button and then you can further modify its look and feel using same selector.
Although usage of !important is not a good practice, but it seems to be already used by plugin.
I agree with the suggestion by Travis Acton to identify a parent on your create-account page that is different from the homepage. It looks like the form on the create-account page has the class register, which doesn't appear to be used on the homepage. I would try this:
.register .btn.ur-submit-button {
color: black;
}
If you're new to CSS, "parent" just means an HTML element that contains the element you're trying to target.
I wanted to apply outline-style: none; to all my buttons in my html page. I created a class:
.outlineNone {
outline-style: none;
}
and assign the class to all my buttons. But it seems not be working. It seems to be only working when I apply the style inline with my html.
Can anyone explain to me why this is happening?
To clarify, I want to get rid of the blue rectangle that appears after you click on a button like the image below:
instead outline-style just use outline, plus you can reset the button style even more by setting border to 0
like this:
.outlineNone {
outline:0;
border:0;
}
Try with:
.outlineNone {
outline-style: none !important;
}
It seems to be a problem with some other structure which is modifying the outline-style that has bigger priority than just a class. (it can be an ID or the Button class itself)
Hi just wondering if anyone else is having a problem with the text-hide class not working on a mobile/tablet. Elements of it seems to be overridden by Boostrap's own CSS mainly 'color' and 'font-size' attributes. I have found if I put it in my custom CSS and give it a more specific selector name it works! In this case I am applying it to the 'navbar-brand' to use a logo as background image and hide the text.
.navbar-default .text-hide {
color: transparent;
border: 0px none;
background-color: transparent;
text-shadow: none;
font: 0px/0 a;
}
It's great that there's an inbuilt image replacement class but it's weird that it is overridden by it's own CSS.
Thanks
you may try putting an !important; in every line of your css so that it will override the bootstrap.
sample code:
color: transparent !important;
I'm aware that the :empty pseudo-class will select all elements with no children, but I want to only select elements with text-nodes as children.
I have a bottom-border on my hyperlinks that're a different color than the text, but this is a problem because the hyperlinked images are also getting this underline.
I've tried a *:not(*){ border-bottom-width: 0; } in an attempt to fix this, but it didn't work. Is there a way to select a tags with only text-nodes for children?
If I understand your problem correctly, you are trying to keep your hyperlinked images from being underlined. If so, why not do something like: a img { text-decoration:none }?
Edit: If its the links on img tags you don't want underlined, apply a class to those links with text-decoration:none
NEW ANSWER:
If you want a border under the image, but not the text do this:
a img { border-bottom: 1px solid #000; }
a:emtpy { border: none; }
If you want the opposite (border under the text but not the image) do this:
a:empty { border-bottom: 1px solid #000; }
a img { border: none; }
OLD ANSWER:
If it's just a problem with images that are wrapped in a tags, try:
a img { border-bottom: none; }
Instead of a crazy selector, why not hide the border with a negative margin:
a img {
margin-bottom: -6px;
}
Demo
When the ONLY CHILD of <a> is not an img ...
a:only-child:not(img)
{
border-bottom-width: 1;
}
This cannot be accomplished because of the way border property is applied and rendered outside the top-most box of your anchor - effectively the only way to achieve such an effect with a border would be to negate the property. Sometimes it coult be visually acceptable to use a bottom border in a background colour to overlay over that of of your anchor's - an unreliable practice to be frowned upon. Maybe the effect could be simulated with filters, but I wouldn't count on it being sufficiently well-supported cross-browser.
What I propose is going back to the text-decoration property *while still maintaining a different, independent underline colour` - a neat approach overall, but not without the overhead of an additional element:
<style>
.fancy-underline { color:blue; text-decoration:underline; }
.fancy-underline a { color:black; text-decoration:none; }
</style>
<span class="fancy-underline"><a href="#">I am a fancy link
<img src="//placekitten.com/30/30/" /> with an image in the middle of it
</a></span>
http://jsfiddle.net/ovfiddle/TwmmF/3/
I ended up just using jQuery. I don't believe it's possible with just CSS right now.
jQuery('document').ready(function(){
jQuery("a").each(function(){
if(this.children.length !== 0)
this.style.borderBottomWidth='0';
});
});
I tried to create buttons and insert my own images instead of the standard button images. However, the gray border from the standard buttons still remains, showing on the outside of my black button images.
Does anyone know how to remove this gray border from the button, so it's just the image itself? Thank you.
Add
padding: 0;
border: none;
background: none;
to your buttons.
Demo:
https://jsfiddle.net/Vestride/dkr9b/
This seems to work for me perfectly.
button:focus { outline: none; }
I was having the same problem and even though I was styling my button in CSS it would never pick up the border:none but what worked was adding a style directly on the input button like so:
<div style="text-align:center;">
<input type="submit" class="SubmitButtonClass" style="border:none;" value="" />
</div>
input[type="button"] {
border: none;
outline:none;
}
You can easily give this style to it:
MyButton {
border: none;
outline: none;
background: none;
}
The border: none; will also do the job for you separately without giving outline (Because: An outline is a line drawn outside the element's border. so when there is no border, outline property doesn't have any meaning on its own).
The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method. so when you set its value to none, then it prevents your button having any color, image and etc....
For removing the default 'blue-border' from button on button focus:
In Html:
<button class="new-button">New Button...</button>
And in Css
button.new-button:focus {
outline: none;
}
Hope it helps :)
Try using: border:0; or border:none;
You can also try background:none;border:0px to buttons.
also the css selectors are div#yes button{..} and div#no button{..} . hopes it helps
Add this as css,
button[type=submit]{border:none;}
Just use:
button{border:none; outline:none;}
The usual trick is to make the image itself part of a link instead of a button. Then, you bind the "click" event with a custom handler.
Frameworks like Jquery-UI or Bootstrap does this out of the box. Using one of them may ease a lot the whole application conception by the way.
You can target the button in the CSS styling like so:
div button {
border: none;
}
$(".myButtonClass").css(["border:none; background-color:white; padding:0"]);