How to set pseudo element CSS such as input::placeholder in garden?
Does garden supports this?
If not, how can I set input:placeholder CSS in a reagent project?
Maybe:
(css ["input::placeholder" {:font-size "16px"} ] )
Related
I want to set background color on flexbox and tried as follow.
Class definition on app:
<App id="app" class="weight-protocol"></App>
on FlexBox:
<FlexBox
height="20%"
width="100%"
alignItems="Start"
class="calendar-header-bg"
justifyContent="Center">
in the css file:
.weight-protocol .calendar-header-bg {
background-color: #007DB2;
}
The custom background color is not going to apply at all as you can see:
Look at the code inspector, the custom css class stays at the beginning calendar-header-bg instead at last.
Did you try without .weight-protocol ?
.calendar-header-bg {
background-color: #007DB2;
}
If not work you can use !important tag:
.calendar-header-bg {
background-color: #007DB2 !important;
}
You can also try use only background tag instead background-color:
.calendar-header-bg {
background: #007DB2 !important;
}
I hope this helps...
Good Luck!
Shouldn't FlexBox have some css to do what you are trying to achieve? use inspector and watch for the div that cointains the flexbox.
Can you be more specific?
I'm guessing the problem is specificity also known as importance of selectors. This means that the selector you're using (class nested in class) has little weight overall, and it very likely overwritten by a different, heavier selector from within the library you're using. For instance the library might be targeting a class within a class within an id or something similar.
My advice is to see the applied styles within the dev tools, see what's overwriting your styles and then decide if you'll make your selector stronger( by making it more specific) or just add !important after your background-color declaration.
This demo demonstrates my problem: http://jsbin.com/kuxuqa/3/edit?html,output
The background is being applied to both buttons, however the mixin is not being applied to the button that is part of a custom element. How can I declare a mixin that will apply to Button 2?
For some reason I was thinking I had to target paper-button in my selector. The solution to my example was:
#test {
--paper-button {
color: red;
}
}
The key is to avoid use of /deep/ and ::shadow (since those will reportedly be deprecated). You should target only light dom with your selectors, using mixins to apply custom styling for elements in shadow dom.
I want to change the styling of paper-icon-buttons, specifically the padding that is defined on paper-icon-button via :host. However, I think this is not possible according to the specs?
So in order to change the styling, one would have to actually change the Polymer element itself, right? Which is a problem though if I want to get updates of the element via bower. Is there a way to change the :host styling with CSS outside of the Polymer element? This is not working.
paper-icon-button:host {
padding: 4px;
}
You can specify styling directly on an instance of the element or with css on the element's name - http://jsbin.com/mohifu/3/edit
Just apply the css directly to element
paper-icon-button{
padding: 4px;
}
I am using Icomoon to create custom font icons, i have a situation where to icons need to be in the same span such as:
<span class="glyph2" aria-hidden="false" data-icon=" "></span>
But they both need to be different colors. Is it possible at all to do this?
And here's the JSFIDDLE containing all the code, but i cant seem to get the custom fonts working in jsfiddle.
Any Help Greatly appreciated.
I don't believe this is possible using only the data-icon attribute.
You could use IcoMoon's icon- classes instead and use the before CSS pseudo selector on one, and the after selector on the second.
icon1:before {
content: "A";
color:red;
}
.icon2:after {
color: blue;
content: "B";
}
I have demonstrated this in a Fiddle.
I haven't been able to demonstrate that in the fiddle, but it looks like it can work.
IcoMoon's are styling in an :before pseudo selector. Acordingly to css the first-letter pseudo-selector should work on the generated content, and so including the :before data.
So, including
.glyph2:first-letter {background-color: blue; color:white}
You should be able to give this appearance to the first icon (generated in
a :before pseudo element with 2 custom chars).
It worked for me in local, but I couldn't get it to work in the fiddle.
Is it possible to apply a style to an HTML element using only its title as a unique identifier? For example:
<div class="my_class">
My Link
</div>
I would like to write a rule that will apply only to link element within a div of class my_class and the link title MyTitle.
I do not have the ability to change page layout, however, I can use a custom CSS file that is included automatically.
Thank you
It sure is, using what's called attribute selectors; these are part of CSS2. In your particular case, you'd use:
div.my_class a[title="MyTitle"] { color: red; }
You can read more about attribute selectors here: http://www.w3.org/TR/CSS2/selector.html#attribute-selectors
Yes you can:
http://www.w3.org/TR/CSS2/selector.html#attribute-selectors
You would say A[title="MyTitle] I believe.
What you are looking for is css attribute selectors:
http://www.w3.org/TR/CSS2/selector.html#attribute-selectors
a[title]
{
...
}
CSS specifications identify a number of "selectors" that may help you here. For example, you could apply a rule such as the following:
.my_class a[title="MyTitle"]
{
...
}
You can see a detailed specification of CSS "selectors" here:
http://www.w3.org/TR/2001/CR-css3-selectors-20011113/
Although it is possible, using attribute selectors (see http://www.w3.org/TR/CSS2/selector.html#attribute-selectors ) Internet Explorer 6 does not support it (see http://kimblim.dk/css-tests/selectors/ )
An example from the W3C site: H1[title] { color: blue; }