I am trying to customise a disabled paper-input element. I would like to remove the dashed lines and change the labels color.
Any suggestion?
This is the element I am trying to style:
<paper-input ui:field="totalLabel" label="Total to repay" always-float-label="true" disabled="true">
<div prefix="true">£ </div>
</paper-input>
Thanks!
paper-input-container has set of custom CSS mixins defined for users to override the default styles.
You can read more about how to apply custom CSS mixins here: https://www.polymer-project.org/1.0/docs/devguide/styling.html#custom-css-mixins
--paper-input-container-underline-disabled can be used to update the disabled underline. https://github.com/PolymerElements/paper-input/blob/v1.1.5/paper-input-container.html#L166
--paper-input-container-disabled can be used to update the general styles of disabled container. https://github.com/PolymerElements/paper-input/blob/v1.1.5/paper-input-container.html#L110
To remove underline you can write something like below in the custom styles. Its better to use different selector based on class name or id name. I have used the element name.
paper-input {
--paper-input-container-underline-disabled: {
border-bottom: none;
};
}
You can use this for disable the under line
paper-input{
/* for disable initially*/
--paper-input-container-underline: {
display: none;
};
/* for disable on focus*/
--paper-input-container-underline-focus: {
display: none;
};
/* for disable on input-disable*/
--paper-input-container-underline-disabled: {
display: none;
};
}
Related
I have a p-PrimeNG sidebar, which includes a fieldset, which itself includes a tree:
<p-sidebar [(visible)]="display" position="right">
<h2>My Checklist</h2>
<fieldset class="default-fieldset">
<legend>Legend ...</legend>
<p-tree [value]="filesTree2"></p-tree>
</fieldset>
</p-sidebar>
I need to be able to remove the border around the tree, as fieldset has already a border. I tried the following codes inside the scss file:
fieldset p-tree { border: none;}
fieldset p-tree { border: transparent;}
but none of them has been helpful.
Could you help me with this?
Use below CSS:
p-sidebar .ui-tree{
border: none;
}
because p-tree compiled and created an HTML with "UI-tree" so you apply all CSS in this class.
You need to apply your css selectors in styles.scss, in order to override the theme styles for the tree. In the case of your tree, add the following rule to your global styles.scss file:
p-sidebar .p-tree {
border: none;
}
Notice that I have specified the class .p-tree and not .ui-tree
Created a custom polymer element "autocomplete" which include existing polymer element "paper-autocomplete"."paper- autocomplete" element class has "paper-input" element with specific style. How can I change "paper-input" element style in "autocomplete" element class(which calls "paper-autocomplete")?
The paper-input element uses the paper-input-container, so you can define a set of CSS variables to style it, in the intended/allowed way.
If you check the source for paper-input-container here, and look under "### Styling" you will see all the options you have to style the element from "outside".
In the paper-autocomplete element add the following:
paper-input {
#apply --my-styles;
}
In the parent element where you incorporate paper-autocomplete add:
paper-autocomplete {
--my-styles: {
background-color: green;
border-radius: 4px;
border: 1px solid gray;
};
}
I search for all solutions but nothing help me.
my simple problem is to set a style for a link ( a Tag ) with a class:
<a class="logo"></a>
I don't want a general style for links or for active ones but for a selected Class.
Thank you.
I think you're looking for the CSS class selector.
To apply a style to just a single class you should prefix the class name with a dot (.) in your CSS selector.
In this particular case you would do it like this:
.logo {
/* Styles here */
}
You can also ensure that only link elements are affected by adding the element selector:
a.logo {
/* Styles here */
}
PS. The CSS id selector is # and it works in a similar manner.
There are three different ways to solute this. Since you do not want a global styling for a link this example will not be it:
a{
/* STYLE HERE */
}
Since you simply want to style a link with a surtain class use this example:
a.logo {
/* STYLE HERE */
}
or
logo {
/* STYLE HERE */
}
or
a[class="logo"] {
/* STYLE HERE */
}
The last example is a new way of making this happen, some very old browser wont understand this, so you better stick to the first or second example.
Use like this
<style>
a[class="logo"] {
background-color: yellow;
}
</style>
<a class="logo">test</a>
you can add style rules by targeting class :
a.logo { color: #aeaeae; }
I have included first Materialize's CSS and then I have linked my css file.
In which I have an example class that sets background-color property to red, but that doesn't override the default color (that's set by materialize-css).
Here's an example:
https://jsfiddle.net/79ss2eyr/1/
I'd like not to change anything in materialize's source files, instead I want to add additional classes and set my additional colors.
Here's what the inspector says:
How should I do that and why my css properties do not override materialize's since it's linked after the framework?
Inn Materialize's the rule is set by footer.page-footer {}, but you're wrote just .app-bg. So you can't override the Materialize's rule.
If u want to override that class you can use footer.app-bg or use !important:
footer.app-bg {
background-color: red;
}
or
.app-bg {
background-color: red !important;
}
Make the css selector more specific, like this:
footer.app-bg {
background-color: red;
}
If your css is not applying to the element because of other applied css just use !important to specify that your css is important.
.app-bg {
background-color: red !important;
}
Example : https://jsfiddle.net/79ss2eyr/2/
I have the following style for an input box
input[type="text"] {
height:16px ;
font-size:14 ;
border-radius: 5px ;
}
What I want to do is have this style on most of the inputs but I want to make a class of input so I can add background color, etc. How can I do this in the syle sheet?
Use classes
Define a class with the different style
input[type="text"].different {
background-color:red;
}
and apply it to the input element in the html
<input type="text" class="different" />
This input will have all the properties of the generic rule input[type="text"] and then apply all the properties of input[type="text"].different class.
The input[type="text"].different is more important so in case of overlapping properties the ones in the .different class will prevail.
Read https://developer.mozilla.org/en-US/docs/CSS/Class_selectors and https://developer.mozilla.org/en-US/docs/CSS/Specificity
input[type="text"].yellow {
background-color: yellow;
}