If you click on that image (which is inside a button) an Alertify message pops up. This (the image above) happens when the message closes.
I have this problem wherein the button defaults back to the default button decoration. How do I prevent this from happening? I already tried the outline: none !important CSS element but it still does not work. Is there an "aggressive" way of getting rid of this?
EDIT: I have double-checked on the developer tools already and it seems that the outline CSS code has already applied. However, this problem still persist.
If you are trying to remove the background blue and the border. Try the following styles..
These will add a 1px wide transparent border which will change color to grey when clicked. It will turn back to transparent when click is released.
Also the background blue color will be removed.
button, button:focus{
outline: none;
background: transparent;
border: 1px solid transparent;
}
button:active{
outline: none;
background: transparent;
border: 1px solid grey;
}
Related
Hello I am trying to remove the default background of toolbar icons when hover in firefox using userChrome.css
.toolbarbutton-icon
{
border-radius: 5px !important;
box-shadow: 0px 1px 1px 1px black, 0 -0.01em 1px 0px #D0D0D0 !important;
background-color: var(--uc-regular-colour) !important;
width: 26px !important;
height: 26px !important;
padding: 5px !important;
}
This block of code changes the size and color of all toolbar buttons including extension icons
Then I used this block of code to change its color when hover over them
*:hover > .toolbarbutton-icon{
background-color: green !important;
}
Which changes color of buttons when hover but the extension buttons stays the same.
How can I change it without having to define each extension name or property
Below are some screenshots to demonstrate the issue
As you can see except extension button all buttons change color
*:hover .toolbarbutton-icon {
background-color: green !important;
}
Tried this block as well as suggested below, but it hovers on all icons by default, I want each button to change color when hovered over them also when I hover over the extension button It still has the gray color
It will be a problem when you use >.
The > notation applies only to the immediate children of that element.
Try use:
*:hover .toolbarbutton-icon {
background-color: green !important;
}
Hope this helps.
.webextension-browser-action:hover > .toolbarbutton-badge-stack .toolbarbutton-icon { background-color: var(--uc-hover-colour) !important;}
Apparently after doing some research. Finally found a way to fix it.
The block of codes only works with extensions installed on firefox
I am building an Ionic App. I have rounded the buttons in order to make them more beautiful, but when I do that the border stays just like the photo that is linked.
I have tried with these different methods but none of them worked:
border: 0px !important;
border-bottom-color: transparent !important;
background-image: none !important;
border-bottom: none !important;
text-shadow: none !important;
box-shadow: none !important;
button 1
It also happens with this other button:
button 2
I cannot use ion-buttons because the text just crashes with it.
Thanks you very much.
You can easily use the css properties --border-color and --border-width like this: --border-color: none; --border-width: 0px !important;. I hope this will be helpful.
Check the properties of the ion-button:
https://ionicframework.com/docs/api/button
--border-color Border color of the button
--border-radius Border radius of the button
--border-style Border style of the button
--border-width Border width of the button
--box-shadow Box shadow of the button
these can be applied to the specific class.
Or within the global.scss file, just add your styling:
ion-button {
...
}
This seems to have the solution I need...
Border radius on Focus input field
Where I want the focus border to match the border radius used for the box itself. As it is right now, the box has curved corners but the focus does not so it looks odd.
I tried...
*:focus {
outline: none;
box-shadow: 0px 0px 2px blue;
}
and...
.field-box:focus {
outline: none;
box-shadow: 0px 0px 2px blue;
}
but neither work so I'm thinking something at a parent level is overriding it. When I check for the css in inspect, I don't see it show up so I can't confirm that is the case. I just know that I can make other changes to the form box but not the focus border itself. Anyone know how to address or if there is a way to identify what might be overriding it?
I am working on a website where a user can select an icon and send it as a request to one of my bots.
I've already got it sorted out. I'm mainly just working on improving the aesthetics.
What I want to happen is, when hovering over an icon (or even selecting it), it shows a light blue background colour to indicate that it's been selected, because right now there is nothing to indicate a chosen icon except for the div at the very top (which isn't always in sight when you scroll further down).
The code I have atm is:
.flair:hover, .selected{
background-color: #3498db;
border-radius: 2px;
}
I've tried adding some padding but since each image is in a spritesheet, it will overlap with other images.
I've also tried using a border instead to emulate the same effect, but hovering over an image would slightly move the other images due to the border being applied and it gets annoying.
Is there some way I can get my background-color to 'overflow' behind the images?
How about you add a transparent border add the begining as a placeholder and change your margins since borders gonna add some space
.flair {
border: 2px solid transparent;
background-clip : padding-box;
margin-right:6px;
margin-top:6px;
}
and then you color it with some additional glow when hovering
.flair:hover {
box-shadow: 0 0 10px #3498db;
border: 2px solid #3498db;
}
Please try this :
.flair:hover, .selected {
border: 1px solid #3498db;
border-radius: 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
I have a qtreewidget in my application. I have set the stylesheet like below for it.
setFrameShape(QFrame::NoFrame);
setStyleSheet("QTreeView { border: none; background: transparent; outline:none; }" "QTreeView::item:!selected:hover { border: 1px solid #AAAAAA}" "QTreeView::item:selected { border: 1px solid #0053A6}");
Now the problem is that there is no border around qtreewidget which is correct behaviour but when I click on any item of this widget a black border appears around the widget. Although I have mentioned the border for this widget to none then why it is appearing on clicking any item.
This is a focus rectangle. To completely disable it:
setFocusPolicy(Qt::NoFocus)