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.
Related
I have a popup that will be added to websites via javascript. I have no clue on what sort of styles will be applied on these websites.
Example website has the current styles added:
h3 {
color: blue;
border: 5px solid red;
font-size: 24px;
}
My Popup which is added to the body of the website has:
PopupText = styled.h3`
font-size: 16px;
color: black;
`;
This means that font size and color are what i've declared but the border will be added regardless, is there any way to remove the added extra css properties, or to protect from additional styling added by the website?
To sum up, I want my popup to look the same, no matter where it is added. As of right now, when i add it to a website it changes depending on what styling is on the website
You can use all attribute like this :
.class {
all: unset;
}
Check it here
I think you need use iframe tag for wrap
You can use the :not() selector to achieve that: If your popup element has a class (which is probably the case) you can modify your regular css rule for h3 as follows:
*:not(.yourpopupclass) h3 {
color: blue;
border: 5px solid red;
font-size: 24px;
}
This will affect any h3 element that is a child element of anything (i.e. also of body), except if it's a child of an element that has class .yourpopupclass (i.e. is inside your popup).
The same woud be possible with an ID if the popup has no class, but an ID.
.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)
My anchor even after applying CSS styles to it when it's disabled still acts like hyperlink. Changes colour when hovered on.
I've spent some time on this already and almost giving up on this one. I want the magnifying glass to not change colour at all after hovering over it.
This is the anchor
<a href="" class="postcode-search-icon clickable"
ng-click="searchPostcode()" ng-disabled="true" title="Search Postcode">
</a href="">
And my current CSS styles attempt to fix it
.postcode-search-icon[disabled], .postcode-search-icon[disabled]:hover {
text-decoration: none;
cursor: not-allowed;
background-color: transparent;
}
What am I doing wrong?
In case you're wondering clickable class is just this so it doesn't matter
.clickable {
cursor: pointer;
}
#edit
Looks like applying color: (original colour) makes a temporary workaround until I find something better.
It seems like your css selector is wrong. The disabled pseudo class only works with input fields and not with anchors.
input[disabled="disabled"], input.disabled {
/* whatever you want */
}
Besides that, idk how you handle the addition of the clickable class, you need to handle that in order to not override styles.
If you are using Angular, you should be able to use a conditional class with the ngClass attribute. Not sure if you are using Angular 2, 3, 4, 5, or JS (here's the JS link for ng-class).
I think I would make the clickable item into a button, as well.
.bright:hover {
color: #0066ff;
cursor: pointer;
}
.dim:hover {
color: #ccc;
cursor: default;
}
<button ng-class="{bright: enabled, dim: disabled}"><i class="search-icon"></i> Search</button>
I created a div with "commonDiv" id (example), then is create multiple divs inside it, div, div in divs etc. All divs contains button(s). I want to add a common style for the buttons. I'd like to add a css only one settings for it.
I tried the following but it's not worked:
div#commonDiv .button{
background-color: #4CAF50;
border: none;
color: white;
}
What's the right way?
Well the best way is mentioning class for all of your <div>s and then adding style in the CSS code using your class.
.your_class_name {write any style you want for all of them !}
Try it this way:
div#commonDiv button{
background-color: #4CAF50;
border: none;
color: white;
}
I removed the period before .button.
The rules you declared didn't match the <button> tag but any element that has class "button"...
If it doesn't solve your issue feel free to leave a comment.
You can see a very good document about CSS selectors here. And if your buttons have not any class may be this code fix your problem:
div#commonDiv button{
...
}
I figured out the solution which is the following: div#commonDiv input[type=button]
I am familiar with using css and the 'hover' feature but I am interested in knowing how to use an on click feature.
So to begin with to use the hover feature you can have:
#test {
background: black;
height: 100px;
width: 100px;
}
and then when the mouse 'hovers' over I want it to turn white
#test:hover {
background: white;
height: 100px;
width: 100px;
}
So is the a similar way of changing the background on click?
Thanks!
James
The psuedo selector element:focus is used generally for when an element has focus. Like when you are typing inside a textarea or input.
As you can see in this demo, button:focus doesn't make the background-color any different onClick.
To make it change while being clicked, use the element:active pseudo selector:
button:active
{
background-color: #f00;
}
Working demo here.
So is the a similar way of changing the background on click?
You can use javascript for this.
Simpliest thing is to use some jquery
$('#test').click(function(){
css('background','green');
});
You can also change the class of an item once clicked. This way you can store the css in your styelsheet.
$('#test').click(function(){
$(this).addClass('greenBackground');
});
Your description is slightly vague but current CSS specs only provide the following related pseudo-classes:
:active - Applies briefly while the element is being clicked
:focus - Applies while the element is focused (mouse or not)