I have the following html:
<div class="bf_form_row">
<label for="findout">Text goes here</label>
<textarea class="findOut" cols="40" id="findout" name="findout" rows="10"></textarea>
</div>
I trying to work out how to style the 'label' element without being able to change the html.
Ideally I'd like to style all 'label' elements that come before 'textarea' elements but I don't think it is possible using just CSS.
I thought this attribute selector would work:
label[for="findout"] {
width: 100%;
}
but no, any ideas?
It works. To see it in action, try changing the color. Anyway, if you want the width to be 100%, I would suggest adding display: block;
label[for="findout"] {
display: block;
width: 100%;
}
Use two classes for ex:- 1] before_textarea 2] after_textarea
.before_textarea {
width: 100%;
// style to label which comes before teaxtarea
}
.after_textarea {
width: 100%;
// style to label which comes after teaxtarea
}
Use the selector:
.bf_form_row label
{
styles
}
This will select all label elements inside the parent with class of bf_form_row.
Hope that helps :)
Related
I am working on a quasar/vue app. I want to style the dialog popup within one component. I'm using scoped CSS, and if the CSS is not scoped, the style works. If the CSS is scoped, the CSS does not work. I only want to style this dialog in this one component.
The template code calling the dialog:
<div class="-nav">
<q-select
outlined
dense
v-model="select"
:options="options()"
behavior="dialog"
style="width: 100px"
/>
The CSS element is:
<style scoped>
.q-dialog__inner {
width: 400px;
background-color: red;
}
</style>
This does not work:
:deep(.q-dialog__inner) {
width: 400px !important;
background-color: red;
}
I noticed that the global quasar style is marked with !important
codepen: https://codepen.io/kiggs1881/pen/oNoOzEj
.q-dialog__inner > div {
width: 400px !important;
background-color: red !important;
}
hope it helps
Have you tried to put the parents class in front of the selector like this?:
(If have seen this here) and it worked for me inside an expansion item.
.q-dialog :deep(.q-dialog__inner) {
width: 400px !important;
background-color: red;
}
I think everything is provided in the quasar.dev documentation if that doesnt help try using on hover => funtion-To-Display-Popover-In-Specific-Component
there are many ways to counter this problem using scoped is not the only one
Hi I am using a child component which is used globally in my app. So now i want to change few CSS properties for this child component only when it is specific to my requirement. I want to apply different properties for description and end class here. How can achieve this using SCSS and is it possible we can acheive it without important tag ?
*****HTML*******
<my-parent class="parent">
//I have added myflag to identify this has to apply only in case of my scenario
<global-child [class.myFlag]="myFlag===true">
<div class="child">
<div class="description">test</div>
<div class="end">end</div>
</div>
</global-child>
</my-parent>
This is how i tried to apply my css, it is picking up height but not color for description
*****SCSS******
global-child.myflag{
height: 100px !important
&.description{
color: blue !important
}
}
Edit 1: Kenny's answer looks good, but it still didn't work for me. The reason i am thinking is below. If that is correct how can achieve this in my scenario.
"I am adding the new CSS in my-parent.scss. And global child component has its styles in global-child component.scss. I believe my new SCSS code(which is parent) is loading before globalchild. Would that be a reason it is not reflecting on the page? "
Edit 2:
Updated few changes in HTML above and below are my child and parent css
****global child css****
.child {
display: flex;
flex-direction: row;
&-description {
width: 100%;
color: BLACK;
position: relative;
}
}
****Parent css*****
.parent{
global-child.myflag {
height: 100px;
.description {
color: blue;
}
}
}
This will work
global-child.myflag {
height: 100px;
.description {
color: blue;
}
}
Now when to use &
When you have class on same element
Like if you have element like
<global-child class="myflag description">
Then you should use & to apply properties to global-child element
But in your case .description is child of global-child element.
So this will work
global-child {
&.myflag {
// css properties
.description {
// css properties for `.description` those are child of `global-child.myflag
}
}
.description {
// css properties for `.description` those are child of only `global-child
}
}
Kenny's answer's were right for applying the CSS styles, But the issue for me was due to style scopes in angular. Providing viewEncapsulation as NONE on my angular component resolved the issue for me.
I'm creating a chat widget and I want to overwrite a bunch of CSS. For example if this is the website theme's CSS:
textarea {
color: red;
margin: 10px;
}
and if I style my widget like:
textarea {
padding: 5px;
}
then only my widget's CSS should work. However, it adds both CSSs to textarea by default - how can I prevent the website's CSS from being added?
As Marc B stated, you can put your chat in an iframe, in which case you can have its own completely separate stylesheet.
If you must use it inline, then you can use all css property to unset what has been set elsewhere:
Widget CSS:
textarea {
all: unset;
padding: 5px;
}
Further, as pointed out in comments elsewhere, the best way is to create different classes for text area and use them where necessary, for example:
textarea.main {
color: red;
margin: 10px;
}
and if I style my widget like:
textarea.chat {
padding: 5px;
}
And then use
<textarea class="main">
or
<textarea class="chat">
depending on what you need.
Well I guess it is really easy to write !important to all your css rules. Just replace ";" with "!important" if that's an easy way for you OR if you really want to change then you can use iframe really
I look on Stack Overflow, and didn't find the solution, I know how to override style if style exists, just change its property. But now I have a strange style to override
Here is an example of what I have
First I have this one:
.slikezamenjanje img{
max-width: 100%;
max-height:150px;
padding-right:7px;
}
Now I need to override that style with just this one:
#zoomTarget .slikezamenjanje img {
max-width: 100%;
}
The problem is that first style appends second, but I don't want that, in this second style what I need is just one line, not to append from the first style?
Instead of override you can add another class to the element and then you have an extra abilities.
for example:
HTML
<div class="style1 style2"></div>
CSS
//only style for the first stylesheet
.style1 {
width: 100%;
}
//only style for second stylesheet
.style2 {
width: 50%;
}
//override all
.style1.style2 {
width: 70%;
}
You just have to reset the values you don't want to their defaults. No need to get into a mess by using !important.
#zoomTarget .slikezamenjanje img {
max-height: auto;
padding-right: 0px;
}
Hatting
I think the key datum you are missing is that CSS comes with default values. If you want to override a value, set it back to its default, which you can look up.
For example, all CSS height and width attributes default to auto.
I have form:
<form class="userForm">
...
</form>
inside of this form is fieldset then div and inside of div is label. Now I want to create css to all label inside of this form:
I try this:
form.userform label {
width: 150px;
}
but with no success
please help
Check your capitalization. Change your form classname to userform or use the following CSS:
This should work:
form.userForm label {
width: 150px;
}
And also this should work (like Girish suggested earlier):
.userForm label {
width: 150px;
}
Without seeing more code, this selector is valid. What i think you need to add is display:block to the label as this isn't a block level element.
form.userform label {
width: 150px;
display: block;
}
Now the width will be visible.
Please try below css code :
.userForm label {
width: 150px;
}
try it .
.userform fieldset div label {
width: 150px;
}