Is there are global way to deactivate the focus color? As you can see in the attachment?
Thanks in advance!
Best Regards,
Thomas
That border is the "focus ring" (it's an accessibility feature that indicates that the field has received focus from a keyboard interaction, but it won't display when focusing the field by using the mouse).
How the focus-ring is styled, depends on each component and theme.
For instance, the focus-ring of TextField in Lumo is a CSS box-shadow in the input-field part:
:host([focus-ring]) [part="input-field"] {
box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
}
:host([invalid][focus-ring]) [part="input-field"] {
box-shadow: 0 0 0 2px var(--lumo-error-color-50pct);
}
A handy way to find those styles is inspecting the <style> tag in the component's shadow DOM
You can override the focus-ring of vaadin-text-field with
:host([focus-ring]) [part="input-field"] {
box-shadow: none !important
}
Then, you import the stylesheet with a #CssImport with themeFor="vaadin-text-field" or by means of registerStyles.
Related
I am using ui-grid with CellNav feature on: http://ui-grid.info/docs/#/tutorial/309_editable_with_cellnav
Can't figure out which CSS style adds blue shadowed border around the grid when focused.
Which CSS class should I override in order to get rid of this border?
Finally I got it after read the source code, use this one:
.ui-grid-focuser:focus {
box-shadow: none !important;
}
This will stop the blue border appearing.
.ui-grid-cell-focus {
border: 0 !important;
}
In Qt Designer, I've set a default print/preview stylesheet in the Preferences, to match the stylesheet of the application that will contain my UIs. When previewing, all of the contained widgets are styled correctly, but my top-level form isn't. Why? And what can I do?
For example, using this stylesheet:
MyFormBase
{ background: black; color: white; }
QLabel
{ background: transparent; color: yellow; }
and a UI structure like
MyForm form (subclass of MyFormBase)
QLabel label
The label has yellow text, but it's displayed on Designer's default (grey) background.
When the Designer creates a preview, it constructs a plain QWidget as the top level window. So any style applied using the class name of the top-level form doesn't match.
Examination of Designer's internals shows that it applies a property to mark the top-level window; we can select using that to style the top-level form:
[_q_custom_style_disabled="true"], /* for preview in Designer */
MyFormBase
{ background: black; color: white; }
QLabel
{ background: transparent; color: yellow; }
Note that the _q_custom_style_disabled property is not a documented feature of Designer, so it may be subject to change without warning.
If you have many selectors that depend on top widget (e.g. if you have MyFormBase > QLabel), or if you're concerned about the hack above, you might want to apply a custom property:
[role~=Page"]
{ background: black; color: white; }
[role~=Page"] > QLabel
{ background: transparent; color: yellow; }
Obviously, you then have to remember to apply the property to the topmost widget on each of your forms!
I have created two text boxes. A light Gray colour shadow is showing above the textbox. I am unable to remove the effect. I have used jQm CSS file in my project.
Above is my screen shot.
The shadow effect upon focusing on an input is from the ui-focus css class
-webkit-box-shadow:0 0 12px #38c;
-moz-box-shadow:0 0 12px #38c;
box-shadow:0 0 12px #38c
If you want to get rid of the shadow, just override the class:
.ui-focus {
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
If you don't like the little inset shadow when the text box is not focused, you can override the ui-shadow-inset class:
.ui-shadow-inset{
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
DEMO
I build my first phonegap Jquery Appl
Im changing my icon using this class
.ui-icon-myapp-email {
background-image: url("app-icon-email.png");
}
This custom icon is for a list view , and i try to remove the round grey background load
Also my picture is a bit big for the shape
I was playing with the .ui-icon but doesnt work
Cant find the class
I just wanna my custom arrow picture full size on a white background list no round no circle box shape
Maybe there is an attribute or via css to make that
thanks
If you are using jQuery v 1.4.0 + then you just need to add the class .ui-nodisc-icon to your link element to remove that annoying circle. You will not need to edit any css or write any overrides.
Late to the party here, but a simple answer is to add
background-color: transparent;
box-shadow: none;
to your custom class name, so:
.ui-icon-myapp-email {
background-color: transparent;
box-shadow: none;
}
is all you need.
With JQuery Mobile 1.3, now all you have to do is add the class "ui-nodisc-icon", no need to mess around with the CSS.
from JQuery Website:
"If you don’t need the dark circle behind the icons, simply add the ui-nodisc-icon to the element or its container to remove the icon background."
This should work.
.ui-icon-myapp-email {
background:transparent; /* or none */
background-image: url("app-icon-email.png");
/* The following border radius rules will override the circle around your icon */
-moz-border-radius: 0px;
-webkit-border-radius:0px;
border-radius:0px;
}
/* To fix the size issue override the .ui-icon height */
.ui-icon{
width:14px;
height:20px;
}
Overrides the icon disc color to white.
.ui-icon,
.ui-icon-searchfield:after {
background: #fff /*{global-icon-color}*/;
background: rgba(255,255,255,1) /*{global-icon-disc}*/;
background-image: url(images/icons-18-white.png) /*{global-icon-set}*/;
background-repeat: no-repeat;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
}
Icon size is specified in ui-icon class which defaults to 18px.
.ui-icon {
width: 19px;
height: 19px;
}
For those of you looking to have just an icon for the button - I found this article to be very useful! I followed the "Reset the button theme" and "Icon-only buttons" sections to get the effect that I needed.
http://appcropolis.com/blog/advanced-customization-jquery-mobile-buttons/
I solved this issue, using:
background-color:transparent;
if you want to add color in background you can use:
background: url(yourimage.png) repeat;
This question already has answers here:
Does the order of classes listed on an item affect the CSS?
(5 answers)
Closed 2 years ago.
Is there a rule in CSS that determines the cascading order when multiple classes are defined on an element? (class="one two" vs class="two one")
Right now, there seems to be no such effect.
Example: both divs are orange in color on Firefox
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
.one { border: 6px dashed green }
.two { border: 6px dashed orange }
</style>
</head>
<body>
<div class="one two">
hello world
</div>
<div class="two one">
hello world
</div>
It depends on which one is declared last in your stylesheet. For example,
.one { border: 6px dashed green }
.two { border: 6px dashed orange }
vs
.two { border: 6px dashed green }
.one { border: 6px dashed orange }
The class defined last in the CSS is what wins in these cases. The order on the element doesn't matter, this is consistent across all browsers that I'm aware of, I'll try and ind the relevant spec bits.
The entire class doesn't win, the properties individually win, if the .one had a property that .two didn't you would of course see that property on both of these <div> elements.
As the other answers have noted, the order declared in the class attribute has no effect - the priority comes from the order of declarations in the CSS file.
However, if you really want to mock up something that allows you to "fake" priority in the class attribute, you could try:
.one-first { border: 6px dashed green }
.two-first { border: 6px dashed orange }
.one { border: 6px dashed green }
.two { border: 6px dashed orange }
And then
<div class="one-first two"/>
and
<div class="two-first one"/>
Will order the priority with the last one winning (in a similar vein to the CSS proprty that comes last taking priority.)
The order of the class attribute doesn't matter one bit. It depends on several things, in your case it's the order in which your css is written.
Both styles have the same specificity, so the .two style overrides the style of .one because it's lower in the style tag.
When using multiple classes for defining an element stylesheet you can use the !important to override the "cascating" of stylesheet.
.one { border: 6px dashed green !important }
.two { border: 6px dashed orange }
It will make your divs green.
I think it's clear that no such rule applies. The rule .one has the same specificity as the rule .two, so according to the CSS standard the properties in the .two block override those in the .one because the .two block appears later. No reference is made anywhere to the order of the words in the class attribute.
the override will happen in the order in which the classes are declared. so .two always wins
When in doubt, view the page in FireBug. It will strike out the classes that are overridden and show the order which they are applied in the page.
Also note that inline styles will override those declared in an external stylesheet. If you want to break the cascading chain af applicability, you can use the !important declaration as in
p {margin: 10px 5px 0 10px !important}
This will cause the !important declration to override others regardless of position. Some see it as bad practice, but it can come in handy if used judiciously.