How can I target the underlying html textarea of a vuetify v-textarea with css? In my case I want to change the line-height, font-family, color and more of the v-textarea. It doesn't work like this:
<v-textarea class="custom-textarea"></v-textarea>
.custom-textarea {
line-height: 1;
color: red;
}
I also tried several other selectors like v-textarea, .v-textarea, v-text-field__slot but none of these worked either. What is the right selector for the textarea?
In order to override a deep element, you need to access the element through deep selectors like
::v-deep .v-textarea textarea
More information about deep selectors
.custom-textarea textarea {
line-height: 1;
color: red;
}
Set id prop of text-area and apply css style by id.
<v-textarea id="input-7-2"></v-textarea>
#input-7-2 {
color:white;
background-color: green;
line-height:1;
}
Codepen demo
Related
Throughout my code I use several icons from the Angular Material library.
Can I apply different css styles to them, based on their real type ?
Ex: I need the folder to have a different colour, and I need to do this only in a certain css theme, so I need to obtain this by applying a custom css style.
I tried something like:
<mat-icon class="mat-icon-folder">folder</mat-icon>
and then
.mat-icon#mat-icon-folder {
color: #FFDA6B;
}
or
.mat-icon-folder {
color: #FFDA6B;
}
in my css file, but with no success.
Any ideas ?
Thanks.
You have multiple ways to apply styling on your icon. You can check this online example, and here are some references to help you to write valid CSS.
CSS Selectors
CSS Specificity
/* by tag name */
mat-icon {
color: red;
}
/* by class selector */
.mat-icon-folder {
color: #ffda6b;
}
/* by tag name and class selector */
mat-icon.mat-icon-folder {
color: blue;
}
/* by tag name and id selector */
mat-icon#folder-icon {
color: purple;
}
Here's the Stackblitz.
I'm trying to apply the CSS color: blue to the div with class mat-button-toggle-label-content, but its not getting applied.
A similar CSS is getting successfully applied to a parent element called mat-button-toggle-group.
Just apply color to mat-button-toggle and keep it inside mat-button-toggle-group
Working stackblitz
mat-button-toggle-group {
background-color: orange;
mat-button-toggle {
color: blue;
}
}
You can apply the style to .mat-button-toggle-label-content but you need to break Encapsulation.
Component styles are encapsulated. You can't access component's styles(classes, ids) from outside of the component. You need to pierce into that component and inject the styles like below
Note: /deep/ is deprecated and no more recommended. So you can go with above approach. And for more details check Component Styles
mat-button-toggle-group {
background-color: orange;
/deep/ .mat-button-toggle-label-content {
color: blue;
}
}
There are many reason for that !
Your CSS may not be inserted properly into code
The order of material design CSS take over the order of CSS
My solution is that you may need to put !important after color: blue;
it is : color: blue !important;
Just move it to styles.scss and it will work Stackblitz.
I'm trying to get the colour of text in my component to change based on what class the body tag has on my page, but because of encapsulation (I think) using something like this doesn't work -
body.pink p
{
color: pink;
}
body.blue p
{
color: blue;
}
There are dozens of posts here on SO asking how to change the body's style from inside your component, but I'm after the exact opposite.
Edit: Just to be clear, I only want the CSS to effect my component, they just need to change when body changes.
The following component CSS syntax appears to work:
body.pink :host p {
color: pink;
}
body.blue :host p {
color: blue;
}
See this stackblitz for a demo.
I have the following problem:
I have a font with a given style in a css class:
.font_arial_36 {
font-family:Arial;
font-size:36px;
}
And now I have a css that gives me the size of a div in a given situation:
.a_div_test {
width:300px;
max-width:350px;
}
I want the a_div_test to have the properties of the font_arial_36, like an inheritance.
Somethin like (this is wrong just posting what I wanted):
.font_arial_36 {
font-family:Arial;
font-size:36px;
}
.a_div_test extends font_arial_36 {
width:300px;
max-width:350px;
}
and now the .a_div_test should also have the font_arial_36 properties.
Is it possible with css?
PS: I do not want to add multiple classes to an Html Element like that:
<div class="font_arial_36 a_div_test"></div>
Because I should rewrite my code in many places where .a_div_test appear.
This is not possible in CSS. What you do is you assign the 2 classes to the element you want.
<div class="font_arial_36 a_div_test"></div>
CSS stands for "Cascading Style Sheets". That means that a top-level element will cascade its styles to its child elements. As long as .a_div_test elements are contained within the subtree of elements of .font_arial_36, they will receive (inherit) all the styles from .font_arial_36.
That's why you define a font-family inside the <body> tag if you want it to apply to all elements within the page.
That is, the inheritance is defined by the HTML structure, not the CSS itself.
why you need to extend when you can add multiple classes with space on HTML element.
<div class="font_arial_36 a_div_test">Like this</div>
As suggested by others, there is no way you can inherit once CSS property into another. Only way is to add both the class to a DOM element to mimic the inheritance. Css solution:
<button class="uiButton disabledButton">Click Here</button>
For below CSS:
.uiButton {
background-color: gray;
color: lightgray;
font-size: 20px;
font-family: "Segoe UI", Helvetica, sans-serif;
text-align: center;
text-decoration: none;
padding: 10px 10px;
border:none;
display: inline-block;
margin: 5px 5px;
cursor: pointer;
}
.disabledButton
{
background-color: gray;
color: lightgray;
cursor: not-allowed;
}
In above: The Button is first styled with uiButton class and then disabledButton class. So whichever CSS class you write later in 'class' attribute, will overwrite properties of earlier one (in case if anything is common).
But, there is a better way:
Yes, if you are ready to use CSS pre-processors like https://sass-lang.com/guide
Note that Sass is a pre-processor. Meaning, Sass file (.scss) will be compiled into CSS (but chrome provides nice debugging for .scss i.e. Sass file). You can write plain CSS in the SCSS file and additionally use directives to achieve inheritance and much more. To make the life easier, there are some software which will automatically create css when scss file is modified (I know http://koala-app.com/ which does that).
if you don't want to add multiple classes to html element then
.font_arial_36, .a_div_test {
font-family:Arial;
font-size:36px;
}
.a_div_test {
width:300px;
max-width:350px;
}
other than this no other possible way seems to be there for inheritance in css, we have to use sass
I have always wonder why this wouldn't work as it would make so much sense.
CSS:
#button1:hover {
background: green;
#button2 {
background: red;
}
}
HTML
<button id="button1"></button>
<button id="button2"></button>
If I hover over Button1, Button2's background should also change.
Is there a workaround to this other than the use of Javascript?
You can use the adjacent selector,
#button1:hover {
Background: green;
}
#button1:hover + #button2 {
Background: red;
}
Have a look at all the css selectors: http://css-tricks.com/almanac/
Oh by the way it's only possible to apply css on hover to elements after the hovered element. Parent elements and elements before the hovered element cannot be styled with css on hover. It's a limitation of css.
This can be done but CSS lacks the ability to provide powerful conditional statements. However if you look into SASS CSS LESS it is starting to happen.