<InputCheckbox class="input-checkbox100" id="ckb1" style="background: #918f8f;" name="remember-me" #bind-Value="CurrentCustomerSubmission.AcceptedTermsAndConditions" />
however when the component is rendered, the color that is being displayed is from the class (input-checkbox100). I am trying to override it for this 1 specific element (so not trying to add it to the CSS).
You can use style tag in your blazor component and override your css class
for example :
#page "/"
<style>
.input-checkbox100{
background: #918f8f;
}
</style>
Give a name to your class here i set ForInput:
<InputCheckbox class="input-checkbox100 ForInput" id="ckb1" name="remember-me" #bind-Value="CurrentCustomerSubmission.AcceptedTermsAndConditions" />
then go to wwwroot go to css and then open app.css and add ForInput in your css with your desire background.
.ForInput{
background: #918f8f;
}
Related
i am trying add background color and change the icon color on prev icon and next icon on vuetify slide group prop. if i target the class which i got from console it's not working. but if i remove scoped from my style tag or try to change the color on console style it's working.
.v-slide-group__next.theme--light.v-icon
{
color: rgb(234, 10, 10)!important;
}
I have tried this way but it's not working.how can i style those props icon? thanks in advance.
In order to target the elements with class it's necessary to use <style> without 'scopped', because 'scopped' automatically adds unique hashes in the class selector on each app build. And this prevents targeting Vuetify's elements using this way. I would suggest you to add some class on your wrapper container, let's say class="my-slider" and to target it like this:
<template>
<div>
<v-slide-group class="my-slider">
</div>
</template>
<style>
.my-slider > .v-slide-group__next.theme--light.v-icon
{
color: rgb(234, 10, 10)!important;
}
</style>
I have website with user can choice date_range, so i use datepicker element-ui. But datepicker default theme, how i can change that in vue.
At present, Element-UI doesn't provide the function of highly customized theme, only simple customized size and color.
However, you can customize the style with the following configuration:
popper-class - custom class name for DatePicker's dropdown
picker-options - You can set custom class name by creating a picker-options object with cellClassName property.
You can override the default style with a custom class.
Example:
// template
<el-date-picker v-model="value1"
type="date"
popper-class="custom-date-picker"
placeholder="Pick a day">
</el-date-picker>
// css
.custom-date-picker{
.el-date-picker__header{
// custom header style here
}
}
this working for me, Element Plus with Vue 3!
In App.vue
<style lang="scss">
.el-date-editor {
--el-date-editor-width: 40% !important;
}
</style>
You need to just add style inside the tag like
<el-date-picker v-model="value1"
type="date"
popper-class="custom-date-picker"
placeholder="Pick a day"
--> style="width: 100%" />
My Angular 2 Dart application has many nested components. If a certain property of one of my components is set to true, a popup is shown.
If this popup is shown I want to add a class to the document body.
Pseudo code example:
<html>
<head>
</head>
<body class="">
<app-component>
<home-component> <!-- with routers -->
<inner-component>
<popup-component>
// if I am active I want to add a body class
</popup-component>
</inner-component>
</home-component>
</app-component>
</body>
</html>
Simple reason: If the popup component is displayed I want to disable body scrolling (overflow-x:hidden;). The popup component is shown if the property bool show_popup within popup_component.dart is set to true.
Unfortunatly in CSS - as far as i know - there is no selector to check this (Is there a CSS parent selector?) - otherwise I would say something like
body:has(.my_popup)
in the main.css file or something similar.
How can I achieve the desired result?
There are two way.
You can use
#HostBinding('class.someclass') bool isSomeClass = true;
in the root component if it has
selector: 'body'
or
document.querySelector('body').classes.add('someClass');
You can use :host-context(...) to style a component depending on a selector matching a parent
:host-context(body.someClass) {
background-color: red;
}
will make the background color red when the body element has class="someClass" set.
I have this label within website:
<nav class="exodus-nav-left-right exodus-content-block exodus-content-block-compact exodus-clearfix">
for example want to add the rule to be met in this condition is:
visibility: hidden;
as I have to put in the CSS file?
Thank you for your help
First of all it seems that its not a "Label"
and if you want to hide element, you can do so by using the display property.
.exodus-content-block {
display:none;
}
If there are other elements with same class then you can narrow down your rule by using the whole class attribute value as below..
.exodus-nav-left-right.exodus-content-block.exodus-content-block-compact.exodus-clearfix {
display:none;
}
you can use the inline styling.
example
<nav class="exodus-nav-left-right exodus-content-block exodus-content-block-compact exodus-clearfix" style="visibility:hidden">
Or you can write as css class and add in the code
<style>.hiddenvis{ visibility:hidden}</style>
<nav class="exodus-nav-left-right exodus-content-block exodus-content-block-compact exodus-clearfix hiddenvis "/>
but you got to make sure other classes used here do not override your hidden functionality
I different CSS styles, one of which is:
#layoutsectiondiv{
border: 2px dashed #000000;
padding: 1px;
left: 0px;
}
I have a aspx page:
<div id="testDiv" runat="server">
</div>
If it was regular HTML, I would set the style of a div by doing a
<div id="layoutsectiondiv">
</div>
At runtime (in code behind), I need to dynamically assign different styles to the DIV. How would I do it?
Use the class property and change your css styles to use class selectors instead of id selectors. For example
.layoutsectiondiv{}
<div id="testDiv" class="layoutsectiondiv">
</div>
Edit
Make your class only so that you apply it on the specific divs you want. don't reuse your classes. This should be easy since your css is already tied to a specific ID, just put that class on that element.
If you use that class on many types of elements what you suggested would work fine.
Josh is right, you should use class instead of id.
for your question :
At runtime (in code behind), I need to
dynamically assign different styles to
the DIV. How would I do it?
try this :
// layoutsectiondiv is defined as class : .layoutsectiondiv{}
testDiv.Attributes["class"] = "layoutsectiondiv";
So you could use a css id selector this way.
#layoutsectiondiv { color: red }
with the following html
<div id="layoutsectiondiv">
</div>
Or a css class html selector like this.
.layoutsectiondiv { color: blue }
with the following html
<div class="layoutsectiondiv">
</div>
If you want to control the style of a particular .net control, ie one that has the runat="server" attribute, then as we know .net will 'mangle' the id to ensure its unique.
In this case in our code we can use FindControl to access the div and change its style
<div id="testDiv" runat="server">
</div>
ie.
HtmlGenericControl testDiv =
(HtmlGenericControl)Page.FindControl("testDiv");
// to hide
testDiv.Attributes.Add("style", "display: none"); // OR
testDiv.Attributes["style"] = "display: none";
// to show
testDiv.Attributes.Add("style", "display: block"); // OR
testDiv.Attributes["style"] = "display: block";
// or to add a class
testDiv.Attributes.Add("class", "MyCssClassName"); // OR
testDiv.Attributes["class"] = "MyCssClassName";
Here is a good explanation on the difference between css id and class - CSS: div id VS. div class.
And here for How to edit CSS style of a div using C# in .NET