I have a web user control where I have ten asp buttons.
I want that when I hover on these buttons the cursor should change to hand cursor, I am able to do that.
Now I want that when I press a button it should change it's back and fore colors so that it looks selected.
I tried to do that by code but it's not working. Following is my css file content:
.buttonclass
{
background-color: Olive;
cursor: pointer;
}
.selectedItemClass
{
background-color: Blue;
color: White;
}
and on the button click I have written like:
Button btn = sender as Button;
btn.CssClass = "selectedItemClass";
but it's not working any idea or another way to achieve the required behavior.
Your code will only work after post-back, and then the button will remain with the selectedItemClass.
You will need to use client-side code to change the class of your button.
One option would be to use a javascript/jquery solution like:
$(".buttonclass").mousedown(function(){
$(this).addClass("selectedItemClass")
});
$(".buttonclass").mouseup(function(){
$(this).removeClass("selectedItemClass")
});
Have you checked if the class is added or replaced? or you can do:
.selectedItemClass
{
background-color: Blue!important;
color: White!important;
}
to check if the order of your css is ignoring the fact there are two different background-color and the priority of them.
Related
I'm working on a 'reset password' function for a VB.net application, where an admin user can reset the password for a user when they have been forgotten their password.
The function currently works correctly, however, I now want to disable this 'reset password' button when the user's account is locked- as admin will have to unlock the account before they can reset the password, so disabling the 'reset password' button will give them a visual prompt that the account needs to be unlocked before the password can be reset.
There is a CSS class for the type of button that the 'reset password' button is, called mainsubmit, and I want to inherit from this class to create one for a 'disabled reset password' button.
The CSS currently is:
.mainsubmit {
padding: 6px;
font-size: 2.4em;
width: 100%;
}
and just below this, I've added:
.mainsubmit .disabledpasswordresetbutton {
pointer-events: none;
opacity: 0.5;
}
In the VB, I have:
If lockedOutUser.IsLockedOut Then
btnResetPassword.Enabled = False
btnResetPassword.CssClass = "mainsubmit.disabledpasswordresetbutton"
End If
However, when I now view the application in the browser, if the user's account is locked, the 'reset password' button is greyed out correctly, but it doesn't seem to have inherited the other properties of the mainsubmit CSS class- for some reason, it's much smaller than the other mainsubmit buttons that are also displayed on that page.
Why hasn't the button belonging to .mainsubmit .disabledpasswordresetbutton inherited the size and other attributes from the .mainsubmit CSS class?
As i said in my comment: The space in your CSS selector (.mainsubmit .disabledpasswordresetbutton) makes it match all elements of class disabledpasswordresetbutton that are children of elements of class mainsubmit. Maybe that's not what you want. If you remove that space, it will match all elements that carry both classes (just like in your VB code):
.mainsubmit {
padding: 6px;
font-size: 2.4em;
width: 100%;
}
.mainsubmit.disabledpasswordresetbutton {
pointer-events: none;
opacity: 0.5;
}
<button type="button" class="mainsubmit">Enabled</button>
<button type="button" class="mainsubmit disabledpasswordresetbutton">Disabled</button>
EDIT: Also, as #MrLister pointed out in the comments, the HTML notation for adding multiple classes via the class attribute is class names separated by spaces. You only use the . in the CSS selectors.
I'm not sure but sounds like your selector is not matching. try:
.mainsubmit.disabledpasswordresetbutton {
pointer-events: none;
opacity: 0.5;
}
I've got to create our own buttons using Bootstrap's btn class. I need to override default colors for the button text in particular. I know about .button-variant but I cannot use it (the corresponding LESS file is not included in project build and I can't make such changes). Here is my LESS:
.some-company-control(#text-color, #hover-text-color) {
color: #text-color;
&:hover,
&:active {
color: #hover-text-color;
}
}
The problem is after a button is clicked it gets the default Bootstrap button text color. When I add &:focus it overrides Bootstrap's defaults but after it is clicked and not hovered it still remains as if it is clicked. I would like to disable the styling when a button is still focused but not hovered anymore.
Thanks everyone for any suggestions!
Try to add this rule:
&:focus:not(:hover) {
color: #text-color;
}
I found this example on the web on how to implement custom properties accessible from QSS for custom QWidgets: https://qt-project.org/wiki/Qt_Style_Sheets_and_Custom_Painting_Example
Does anyone know how can I implement the widget so that I can have different colors for hover or pressed states?
Current stylesheet looks like this:
SWidget
{
qproperty-lineColor: yellow;
qproperty-rectColor: red;
}
I want to be able to have something like this:
SWidget:hover
{
qproperty-lineColor: blue;
qproperty-rectColor: green;
}
SWidget:pressed
{
qproperty-lineColor: orange;
qproperty-rectColor: violet;
}
Note: I know it is possible to implement mouse events and change the colors using qproperties specific to the mouse events, for example:
SWidget
{
qproperty-lineColor: yellow;
qproperty-rectColor: red;
qproperty-lineColor-hover: orange;
qproperty-rectColor-hover: violet;
}
but I would like to be able to make it work using the original qss/css way.
Regards!
When user hover or pressed widget, you should change some widget property. And make different QSS selector for that properties.
After change property you should make unpolish\polish of application styles.
qApp->style()->unpolish( this );
qApp->style()->polish( this );
Where "this" current window pointer. That "magic" code will help to have affect of appropriate QSS selector.
I have this code that changes the styling of the checkbox "tick" mark on selecting the checkbox,
.x-input-checkbox:checked + .x-field-mask:after {
//Your style here
}
P.S. The above code is only for the check mark not the whole field.
but I dont know how to change the background color of the checkbox field on selecting it using purely CSS (the whole field)
You have to manipulate the .x-field-mask class. .x-field-mask:after is only used to draw the tick.
.x-field-mask {
background-color: green;
}
should do the trick.
I am developing a web app using twitter bootstrap, i want to create my own button with my own background, i don't want to use the already present buttons using btn-primary etc... but i want to create my own button with my own class. I want to use the core functionality of the btn class. so ideally my button will use the class=" btn btn-myPrimary".
I checked in variables.less and buttons.less, there only i am able to change the value of existing buttons such as btn-primary. i am not able create my own button something like btn-myPrimary.
Thanks in advance for any help.
If you can compile the less files then you can use this button mixin (from mixins.less):
// Button variants
// -------------------------
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons
.button-variant(#color; #background; #border) {
color: #color;
background-color: #background;
border-color: #border;
...
If you look at buttons.less you can see how they use it:
.btn-default {
.button-variant(#btn-default-color; #btn-default-bg; #btn-default-border);
}
.btn-primary {
.button-variant(#btn-primary-color; #btn-primary-bg; #btn-primary-border);
}
// Warning appears as orange
.btn-warning {
.button-variant(#btn-warning-color; #btn-warning-bg; #btn-warning-border);
}
// Danger and error appear as red
.btn-danger {
.button-variant(#btn-danger-color; #btn-danger-bg; #btn-danger-border);
}
// Success appears as green
.btn-success {
.button-variant(#btn-success-color; #btn-success-bg; #btn-success-border);
}
// Info appears as blue-green
.btn-info {
.button-variant(#btn-info-color; #btn-info-bg; #btn-info-border);
}
Like this ref links below
Link