I need to disable :active pseudo selector for some (but not all) buttons. So button stays with exact same styles as it was as user fires onmousedown event.
I've tried to duplicate css styles from default btn to btn:active and it partially works, but some styles got overwritten.
Maybe there is some other options. I'm fine with using some quick and dirty solution for now.
In case someone need the code - posting it below:
.btn-system {
outline: none;
box-sizing: border-box;
height: 21px;
padding: 0px 16px;
font-size: 13px;
border: 1px solid #d5d5d5;
font-weight: 400;
background-color: #fff;
letter-spacing: 0.4px;
border-radius: 4.5px;
border-top-color: rgb(198, 198, 198);
border-bottom-color: rgb(170, 170, 170);
border-left-color: rgb(192, 192, 192);
border-right-color: rgb(192, 192, 192);
}
.btn-system.btn-active:not([disabled]), .btn-system:active {
/*color: #fff;
font-weight: 300;
letter-spacing: 0.8px;
padding: 0px 16px;
border-top-color: rgb(64, 150, 248);
border-bottom-color: rgb(9, 85, 255);
border-left-color: rgb(39, 122, 252);
border-right-color: rgb(39, 122, 252);
background-image: linear-gradient(rgb(94, 168, 249), rgb(14, 117, 255));*/
letter-spacing: 0.8px;
color: #fff;
font-weight: 300;
padding: 0px 17px 1px 16px;
border-top-color: rgb(64, 150, 248);
border-bottom-color: rgb(9, 85, 255);
border-left-color: rgb(39, 122, 252);
border-right-color: rgb(39, 122, 252);
background-image: linear-gradient(rgb(94, 168, 249), rgb(14, 117, 255));
}
.btn-system:active {
border-top-color: rgb(30, 114, 254);
border-bottom-color: rgb(3, 56, 216);
border-left-color: rgb(16, 82, 233);
border-right-color: rgb(17, 82, 227);
background-image: linear-gradient(rgb(64, 140, 253), rgb(11, 93, 224));
}
Give id's to those buttons with which you want to use pseudo selector
Hope this helps
Related
I have a code:
button {
background: rgb(1, 81, 227);
background: linear-gradient(
90deg,
rgba(1, 81, 227, 1) 35%,
rgba(0, 90, 255, 1) 100%
);
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
margin: 4px 2px;
cursor: pointer;
border-radius: 6px;
}
And a ton of buttons. I want to apply that css code for all buttons except two, with the IDs startAction & endAction.
How do I do that?
button:not(#startAction):not(#endAction)
by #underscore_d
Your startAction and endAction buttons probably share some of those styles.
If so, just keep those shared lines within the generic button declaration and move the other stuff into a new style and then apply that to the rest of the buttons.
Something like...
button {
display: inline-block;
border: none;
color: white;
...
}
.fancybutton {
background: rgb(1, 81, 227);
background: linear-gradient(
90deg,
rgba(1, 81, 227, 1) 35%,
rgba(0, 90, 255, 1) 100%
);
margin: 4px 2px;
...
}
I am using a custom CSS for a Qt5 window, but there is an ugly horizontal line on the selected button that I would like to get rid of it, or customize it.
This is the CSS I'm using right now.
* {
background-color: black;
color: white;
font: 24px;
}
QPushButton:disabled {
background-color: rgb(67, 67, 67);
border-color: rgb(67, 67, 67);
}
QPushButton {
color: black;
background-color: yellow;
border-width: 1px;
border-color: yellow;
border-style: solid;
border-radius: 10px;
min-width: 3em;
min-height: 30px;
padding: 6px;
}
QPushButton:pressed {
background-color: rgb(255, 193, 0);
border-color: rgb(255, 193, 0);
}
QPushButton:hover {
border-color: rgb(255, 193, 0);
}
QPushButton:default {
background-color: rgb(255, 255, 255);
}
I want to change the blue glow if the focus on Bootstrap 3 input and textareas.
I tried adding this
textarea:focus, input:focus, input[type]:focus, .uneditable-input:focus {
border-color: rgba(229, 103, 23, 0.8);
box-shadow: 0 1px 1px rgba(229, 103, 23, 0.075) inset, 0 0 8px rgba(229, 103, 23, 0.6);
outline: 0 none;
}
to my costum.css but it only change the glow of input fields, not textarea.
I also tried this,
.input:focus {
outline: none !important;
border:1px solid red;
box-shadow: 0 0 10px #719ECE;
}
which changed nothing.
I am not a CSS savvy so appreciate your help.
Try using:
textarea:focus, input:focus, .uneditable-input:focus {
border-color: rgba(229, 103, 23, 0.8) !important;
box-shadow: 0 1px 1px rgba(229, 103, 23, 0.075) inset, 0 0 8px rgba(229, 103, 23, 0.6) !important;
outline: 0 none !important;
}
I need to create this kind of button in Bootstrap 3:
The problem is that line between text and icon: I have tried a lot but still didn't get the same look :(
Here is what I have for now
CSS
.btn-default, .btn-default:active, .btn-default:focus{
background-color:#fff;
background-color: rgba(255,255,255, 1.0);
-webkit-box-shadow: 0px 4px 0px 0px rgba(48, 174, 227, 1.0);
-moz-box-shadow: 0px 4px 0px 0px rgba(48, 174, 227, 1.0);
box-shadow: 0px 4px 0px 0px rgba(48, 174, 227, 1.0);
border-top:1px solid rgba(48, 174, 227, 1.0);
border-left:1px solid rgba(48, 174, 227, 1.0);
border-right:1px solid rgba(48, 174, 227, 1.0);
}
HTML
<i class="fa fa-lg fa-file-excel-o"></i>Export to excel
Maybe the answer is in btn group, but that icon is clickable also :(
demo - http://www.bootply.com/vVPtGC3QEs
a.btn{
padding:4px 15px;
}
.fa-lg{
border-right: 2px solid rgba(48, 174, 227, 1.0);
padding-right: 7px;
margin-right: 8px;
vertical-align: initial;
line-height:28px;
}
I'm currently using stylesheets to theme an application.
Here is the stylesheet I use for QTabWidget:
/*QTabBar et QTabWidget*/
QTabBar::tab {
background: qlineargradient(spread:pad, x1:0.5, y1:0, x2:0.5, y2:1, stop:0 rgba(73, 73, 74, 255), stop:1 rgba(40, 40, 40, 255));
border: 1px solid rgb(190, 190, 190);
max-height: 0.6em;
min-width: 0.6em;
padding: 5px;
margin-left: -1px;
margin-right: -1px;
}
QTabBar::tab:selected, QTabBar::tab:hover {
background: qlineargradient(spread:pad, x1:0.5, y1:1, x2:0.5, y2:0, stop:0 rgba(39, 117, 219, 255), stop:1 rgba(107, 171, 249, 255));
}
QTabBar::tab:last {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
margin-right: 0px;
}
QTabBar::tab:first {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
margin-left: 0px;
}
QTabBar::tab:only-one {
border-radius: 3px;
margin: 0px;
}
With this, when tabPosition is set to North or South, no problem. But with East or West, the TabBar's border is not properly styled.
Do someone know how to style a TabBar with tabPosition set to east/west?
From the Qt stylesheet reference page:
The :top, :left, :right, :bottom pseudo states depending on the
orientation of the tabs.
So, for example, to apply your first css rule to the horizontal QTabBars:
QTabBar::tab:top, QTabBar::tab:bottom {
background: qlineargradient(spread:pad, x1:0.5, y1:0, x2:0.5, y2:1, stop:0 rgba(73, 73, 74, 255), stop:1 rgba(40, 40, 40, 255));
border: 1px solid rgb(190, 190, 190);
max-height: 0.6em;
min-width: 0.6em;
padding: 5px;
margin-left: -1px;
margin-right: -1px;
}