It use from external CSS file.(google MDL)
And I want to cancel just -webkit-flex element.
How can I cancel only that line?
Removing A Style
If you want to remove a single specific style that is being applied to an element, you can simply set that style to an empty string :
// This would remove your specific style (i.e. -webkit-flex-wrap)
$('{selector}').css('{style}','');
This should remove the style entirely as mentioned in the documentation :
Setting the value of a style property to an empty string — e.g.
$('#mydiv').css('color', '') — removes that property from an element
if it has already been directly applied,
Setting Its Default
If you simply want to set it to it's default value, you could setting its value to initial (i.e. display: initial) or you should consider what value you want it to have and use that.
Consider Overriding
If you are already using these styles, then it may simply be easier to just override them to define the values you want to use :
.mdl-navigation {
display: {your-preferred-value}!important;
}
Related
I am looking for the next scenario in css where i will be able to check if a style is applied without using any javascript code. Example: If flex: wrap is applied add another style like gap: 5. All this computations should be done using only css. I inspected the documentation but i did not find something similar. Could somebody help?
You can directly use the "gap" css. If there is a flex property used, only then the gap property will work. So no harm in using the gap property by default. Why check for whether flex is used or not.
as far as I understand, to check a style is applied, it must use javascript code,
ex:
const box = document.getElementById('box');
// Check if CSS property is contained in Style
if (box.style.backgroundColor) {
console.log('value is', box.style.backgroundColor);
} else {
console.log('CSS property is not contained in style');
}
I have a website I'm building and I want to have a custom cursors specified for each property like hand, wait, pointer, default, move and so on...
I'm build an operating system website so I want to have custom cursors.
Here is the CSS code.
* {
cursor:url("../.drive/system/visual/cursors/pointer.png"),pointer;
cursor:url("../.drive/system/visual/cursors/hand.cur"),hand;
cursor:url("../.drive/system/visual/cursors/pointer.cur"),default;
cursor:url("../.drive/system/visual/cursors/move.cur"),move;
cursor:url("../.drive/system/visual/cursors/move.cur"),all-scroll;
cursor:url("../.drive/system/visual/cursors/horizontal-resize.cur"),col-resize;
cursor:url("../.drive/system/visual/cursors/horizontal-resize.cur"),e-resize;
cursor:url("../.drive/system/visual/cursors/horizontal-resize.cur"),w-resize;
cursor:url("../.drive/system/visual/cursors/vertical-resize.cur"),row-resize;
cursor:url("../.drive/system/visual/cursors/vertical-resize.cur"),n-resize;
cursor:url("../.drive/system/visual/cursors/vertical-resize.cur"),s-resize;
cursor:url("../.drive/system/visual/cursors/diagonal-resize-1.cur"),se-resize;
cursor:url("../.drive/system/visual/cursors/diagonal-resize-1.cur"),nw-resize;
cursor:url("../.drive/system/visual/cursors/diagonal-resize-2.cur"),sw-resize;
cursor:url("../.drive/system/visual/cursors/diagonal-resize-2.cur"),ne-resize;
cursor:url("../.drive/system/visual/cursors/move.cur"),grab;
cursor:url("../.drive/system/visual/cursors/move.cur"),grabbing;
cursor:url("../.drive/system/visual/cursors/unavailable.cur"),no-drop;
cursor:url("../.drive/system/visual/cursors/unavailable.cur"),not-allowed;
cursor:url("../.drive/system/visual/cursors/text.cur"),vertical-text;
cursor:url("../.drive/system/visual/cursors/text.png"),text;
cursor:url("../.drive/system/visual/cursors/wait.cur"),wait;
cursor:url("../.drive/system/visual/cursors/help.cur"),help;
cursor:url("../.drive/system/visual/cursors/precision-select.cur"),crosshair;
}
The only cursor that happens to load is the one at the bottom (crosshair)
I've also specified some PNG cursors aswell and they did not change the outcome.
I tried putting this into html,body{} and div{} but again nothing worked.
I want something like on Windows93 but without JavaScript
If there is no CSS-only method then I can accept JavaScript ones. But please only vanilla-js.Thanks!
The cursor values are overwriting each other. This means that the last value is the only one that works, as it is the last one to overwrite the cursor value.
The word that follows the URL is a fallback keyword. This means that if the image cannot be found or rendered, the cursor specified by the keyword will be drawn.
For example, with the property cursor: url("../.drive/system/visual/cursors/precision-select.cur"), crosshair;, the browser will attempt to draw the cursor specified in the URL, but if it cannot it will use the default crosshair cursor.
To get the browser to display different cursors you will need to specify the cursor for each element. For your default cursor you would have:
* {
cursor:url("../.drive/system/visual/cursors/pointer.cur"),default;
}
To get a pointer over links you might then do:
a {
cursor:url("../.drive/system/visual/cursors/pointer.png"),pointer;
}
For crosshairs on a particular element you might try:
.target-element {
cursor:url("../.drive/system/visual/cursors/precision-select.cur"),crosshair;
}
You need to specify the cursor property for each element that you wish to have a changed/custom cursor. Using a universal selector for the default cursor ensures that you only specify the property for elements that require it.
I'm trying to set different visual styles for a pressed QToolButton depending on whether it displays a menu or not.
In my code, tool buttons having menu set their popupMode property to QToolButton::InstantPopup (value 2), while buttons without an associated menu keep the default value (QToolButton::DelayedPopup, value 0).
I tried to use such property in different ways as selector, but only the last one (QToolButton[popupMode="2"]) worked:
/* Not working */
QToolButton[popupMode=InstantPopup]:pressed,
QToolButton[popupMode="InstantPopup"]:pressed,
QToolButton[popupMode="QToolButton::InstantPopup"]:pressed,
QToolButton[popupMode="QToolButton--InstantPopup"]:pressed,
QToolButton[qproperty-popupMode=InstantPopup]:pressed,
QToolButton[qproperty-popupMode="InstantPopup"]:pressed,
QToolButton[qproperty-popupMode="QToolButton::InstantPopup"]:pressed,
QToolButton[qproperty-popupMode="QToolButton--InstantPopup"]:pressed,
QToolButton[qproperty-popupMode="2"]:pressed
{
background-color: blue;
}
/* Working */
QToolButton[popupMode="2"]:pressed,
{
background-color: red;
}
(This is a compilation of the options, I've tested them separately).
Documentation mentions that if the enum is declared using Q_ENUM (as ToolButtonPopupMode does), then it should be referenced by name, not by value, but, as it can be seen above, it seems it is not the case for selectors.
Question: Would it be possible to use such enum's name as selector in the stylesheet instead of the enum's value?
Note: I understand that other options such as custom properties with a more expressive, Qt-independant value can make the work too. I'm curious about the possibility of using the enum in the described way.
QToolButton[popupMode=InstantPopup]:pressed is the correct one.
setProperty(<property_name>, QVariant::fromValue(<enum_value>)) for enum class.
setProperty(<property_name>, <enum_value>) for enum.
But you need to reload the style if you want it to change dynamically.
Read about QStyle::unpolish and QStyle::polish.
I Konw I can use setStyleSheet() to set style in Qt.But I encountered a problem,when I used setStyleSheet() twice first styles lost,which are set by first use of setStyleSheet().
For exmaple,
setStyleSheet("QLabel{color:red;}");
…………
setStyleSheet("QLabel{border-image:url(……)}")
When I set border-image,the red color property lost.
I tried to solve it by using
setStyleSheet(styleSheet()+QString("QLabel{border-image:url(……)}"));
but it was the same that only the border-image property existed.
Must I add every style property when I use setStyleSheet(),although that I set it before.
Thanks for bearing my poor written English.Any tips will be appreciated.
You can set stylesheets without QLabel tag:
setStyleSheet("color:red;");
After setting one stylesheet property, you can add another property like:
setStyleSheet( styleSheet().append(QString("border-image:url(……);")) );
This is in response to your comment on the accepted answer.
You can prevent overwriting stylesheets properties by setting the constant values to the parent (permitting that the parent's style isn't being changed dynamically as well). Only set the values that you change with C++ to the child item.
parentWidget->setStyleSheet( "QLabel#yourLabel { color:red; }" );
yourLabel->setStyleSheet( "QLabel { border-image:url(...) };" );
This will retain all of the parents properties that have been set on the widget when you change the widget's stylesheet.
Furthermore, this removes the case of a very large string, which is possible in the accepted answer. Frequent changes will inefficiently append the string with previously defined styles that will not be used.
By using double column for the second entry.
ui->pushButton_2->setStyleSheet(
"QPushButton{background-color:red;color:white}\
QPushButton::hover{color:black}");
When a drupal form fails validation, it is redrawn with the elements that failed validation surrounded in a red border. Drupal does this by adding the error class to the input elements, and specifing a 2px red border on input.error elements in system.css.
Without modifying this stylesheet, how can I remove the red border on a specific form only, while using the default behavior on the rest of the site?
I believe the solution might require using a custom theme_form_element, but I can't figure out how to customize a single form only.
Note that I would like to do this without having to resort to this jQuery trick (which does work):
$("#edit-name").removeClass('error');
You will need to remove the error class from the form items. This can be done by overwriting the theme functions, in theme_textfield, theme_textarea ... (there is one for each type)
Take a look at $element['#attributes']['class'] which contains the error class.
EDIT
To do it for a specific form element or form you can use the #theme attribute or either form or element you want to change the theming function for.
The easiest way is not to try to modify the markup Drupal is spotting out, but instead to change the styles assocaited with the error class.
You can do that without modifying system.css. Simply add a new stylesheet in your theme (or using an existing one!). Use the Cascading nature of CSS to change the way elements with errors appear. Add something like:
.error {
border: 0;
}
... and you are done.
To target only one specific form, add another selector, like so:
#my-specific-form .error {
border: 0;
}