I am working with telerik ui combobox and enabled its checkbox property. Also I a using my custom skin.
My problem is that I am not able to change the style of checkbox. I wanted to change how the checkbox style as per my requirements especially the background colour of checkbox and its shape.
enter image description here
First, I advise that you check out the w3schools that explains how CheckBoxes can be styled at How TO - Custom Checkbox.
And now, inspect the Telerik ComboBox to understand how it is rendered. As you can see, this HTML structure differs a little bit from the one presented in the 3wschools tutorial.
Don't you worry, you can adjust that. Use your JavaScript/jQuery skills and imagination to bend the structure to your will.
Attach the OnClientLoad event to the ComboBox
<telerik:RadComboBox ID="RadComboBox1" runat="server"
RenderMode="Lightweight" CheckBoxes="true"
OnClientLoad="OnClientLoad">
<Items>
<telerik:RadComboBoxItem Text="Item 1" />
<telerik:RadComboBoxItem Text="Item 2" />
<telerik:RadComboBoxItem Text="Item 3" />
<telerik:RadComboBoxItem Text="Item 4" />
</Items>
</telerik:RadComboBox>
When this event fires, make some changes to the HTML structure similar to the example from w3schools:
function OnClientLoad(sender, args) {
// get reference to the ComboBox Items
var $comboItems = $(sender.get_dropDownElement()).find('.rcbItem');
// Loop through each item
$comboItems.each(function () {
var $item = $(this);
// add the container class to the items
$item.addClass('container');
// render a span element inside the item
$item.find('label').append('<span class="checkmark"></span>');
})
}
You should now have a similar structure the CSS could work with:
You can now re-use the CSS from the w3schools tutorial with a slight change, that is by making the selectors more specific (stronger):
/* The container */
.RadComboBoxDropDown .container {
display: block;
position: relative;
padding-left: 35px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.RadComboBoxDropDown .container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
/* On mouse-over, add a grey background color */
.RadComboBoxDropDown .container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.RadComboBoxDropDown .container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.RadComboBoxDropDown .checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.RadComboBoxDropDown .container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.RadComboBoxDropDown .container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
More details on CSS Specificity
Specifics on CSS Specificity;
CSS Specificity: Things You Should Know;
Specificity - CSS | MSDN;
CSS !important: Don’t Use It. Do This Instead
The final Result of the Telerik ComboBox with customized CheckBox design
I tried to keep my answer as short as possible. Hope it will prove helpful ;)
The rendered result for Html.DisplayFor on a boolean value is a disabled checkbox. I just want to change its color. I've looked on many websites, including this one, but most of the help around this topic is for people who want to change the display to between two text values.
I created a custom css file and referenced it in my layout page, but it does not do anything.
input[type="checkbox"].disabled {
color: #ccc
}
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - ASI Dashboard</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="~/css/styles/custom.css"/>
#RenderSection("Style",false)
</head>
Declared the section in my razor page.
#section style{
}
I can see in the chrome inspector that the HTML is written such that
#Html.DisplayFor(model => model.xx.yy) returns <input class="check-box" disabled="disabled" type="checkbox"/> on my page. The types match, so why does the color still not change? I know I must be missing something. What am I doing wrong?
EDIT: After looking at the element itself, all of the "color" elements are striked through, and I can see my custom style. It would seem it has no other color references to go by except mine, yet the checkbox is still the dull grey instead of changing colors.
element.style {
}
input[type="checkbox"] {
color: #e83e8c;
background-color: #6f42c1;
border-color: #ff6a00;
}
input[type=checkbox], input[type=radio] {
box-sizing: border-box;
padding: 0;
}
button, input {
overflow: visible;
}
button, input, optgroup, select, textarea {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
*, ::after, ::before {
box-sizing: border-box;
}
user agent stylesheet
input[type="checkbox" i]:disabled {
<strike>background-color: initial;</strike>
}
user agent stylesheet
input:disabled {
<strike>background-color: -internal-light-dark-color(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3));
border-color: rgba(118, 118, 118, 0.3);</strike>
}
user agent stylesheet
input[type="checkbox" i] {
-webkit-appearance: checkbox;
box-sizing: border-box;
margin: 3px 3px 3px 4px;
}
user agent stylesheet
input:disabled {
<strike>color: -internal-light-dark-color(rgb(84, 84, 84), rgb(170, 170, 170));</strike>
cursor: default;
}
user agent stylesheet
input[type="checkbox" i] {
<strike>background-color: initial;</strike>
cursor: default;
margin: 3px 0.5ex;
padding: initial;
border: initial;
}
user agent stylesheet
input {
-webkit-writing-mode: horizontal-tb !important;
text-rendering: auto;
<strike>color: -internal-light-dark-color(black, white);</strike>
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
-webkit-appearance: textfield;
<strike>background-color: -internal-light-dark-color(rgb(255, 255, 255), rgb(59, 59, 59));
-webkit-rtl-ordering: logical;
cursor: text;
margin: 0em;
font: 400 13.3333px Arial;
padding: 1px 2px;
border-width: 2px;
border-style: inset;
<strike>border-color: -internal-light-dark-color(rgb(118, 118, 118), rgb(195, 195, 195));</strike>
border-image: initial;
}
body {
margin: 0;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: #fff;
}
:root {
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--red: #dc3545;
--orange: #fd7e14;
--yellow: #ffc107;
--green: #28a745;
--teal: #20c997;
--cyan: #17a2b8;
--white: #fff;
--gray: #6c757d;
--gray-dark: #343a40;
--primary: #007bff;
--secondary: #6c757d;
--success: #28a745;
--info: #17a2b8;
--warning: #ffc107;
--danger: #dc3545;
--light: #f8f9fa;
--dark: #343a40;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
--font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}
#media (min-width: 768px)
html {
font-size: 16px;
}
html {
font-size: 14px;
}
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
}
*, ::after, ::before {
box-sizing: border-box;
}
*, ::after, ::before {
box-sizing: border-box;
}
EDIT: I have included a screenshot of the inspector. The attributes are seen correctly, but they do not apply.
Screenshot of inspector
You are trying to use disabled as a class of the input type checkbox. So input[type="checkbox"].disabled works when you have HTML like this:
<input type="checkbox" class="check-box disabled" />
But that is not the case here. Your HTML is coming like this:
<input type="checkbox" class="check-box" disabled="disabled" />
You are getting an attribute added (which is the default behaviour of the HTML disabling). Hence what you need to change your CSS style is to use either one of the below:
input[type="checkbox"][disabled] {
// customize here
}
OR
input[type="checkbox"]:disabled {
// customize here
}
NOTE: I have never checked the 2nd one myself but have tried the 1st one. It works!
At the bottom of it all, it turns out this was just me not understanding how to manually input the HTML instead of relying on #Html.DisplayFor.
Forcing the HTML as
<input class="custom-control-input" type="checkbox" checked="#Model.Class.Item" disabled />
I left this link in the head section of my layout:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
Then, I used the google chrome inspector to find the right css elements.
<style>
.custom-control-input:disabled ~ .custom-control-label::before {
background-color: red;
}
.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
background-color: green;
}
.custom-control-input:checked ~ .custom-control-label::before {
border-color: grey;
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='green' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
}
</style>
I have a button :
<div class="HeaderBarThreshold">
<asp:LinkButton ID="SetThreshold" OnClick="btnSetThreshold_Click" runat="server">Threshold</asp:LinkButton>
</div>
I am trying to change the color of the button on mouse hover :
Here is my css :
.HeaderBarThreshold
{
padding-left: 10px;
font-weight: bold;
}
.HeaderBarThreshold:hover
{
color: Red;
}
It doesnt work somehow. Please let me know.
Try using the CssClass Property of ASP.NET controls. This will directly point the LinkButton itself to the CSS class, instead of having to use the div tag. For example:
<asp:LinkButton ID="SetThreshold" OnClick="btnSetThreshold_Click" runat="server" CssClass="HeaderBarThreshold">Threshold</asp:LinkButton>
Here is a fiddle http://jsfiddle.net/zpfw7/
.HeaderBarThreshold
{
padding-left: 10px;
font-weight: bold;
width:300px;
height:30px;
border:1px solid #000;
text-align:center;
}
.HeaderBarThreshold:hover
{
color: Red;
background:blue;
}
try this thing:
.HeaderBarThreshold a:hover
{
color: Red;
}
Add the CSS class attribute to your web control
<asp:LinkButton CSSClass="HeaderBarThreshold" ID="SetThreshold" OnClick="btnSetThreshold_Click" runat="server">Threshold</asp:LinkButton>
Also your CSS is wrong anyway because you don't have anything assigned to class "HeaderBarThreshold".
just try this
.HeaderBarThreshold:hover a
{
color: Red !important; // !important may not be necessary
}
.upda_link {
font-size: 15px !important;
color: white;
font-weight: bolder;
}
.upda_link:hover {
text-decoration: none;
color: white;
}
<asp:LinkButton ID="LinkButton1" runat="server" Text="Update" CssClass="upda_link" CausesValidation="false">
</asp:LinkButton>
I have the following situation:
I've got a header, content, and a footer.
Now the header and footer have a fixed height and are always on the screen.
css for footer and header:
#footer {
background-color:#e6e6e6;
width:100%;
height:46px;
bottom:0;
left:0;
position:fixed;
border-top:1px solid #7F8C8D;
z-index:101;
}
#header {
border-bottom:1px solid black;
height:45px;
background-color:#828282;
color:#FFF;
position:absolute;
top:0;
left:0;
right:0;
z-index:105;
width:100%;
box-sizing:border-box;
}
As for the content i have the following:
#content {
background: #9cbbe3 url(../img/backgr.gif) repeat-x;
right:0;
left:0;
background-size:auto;
position: absolute; top: 0px; bottom: 0px;
overflow: auto;
}
Now this works! at first...
But then i go and maximize and minimize the window, and i end up with two scroll-bars.
When i refresh the page the problem is fixed. and re-sizing works as far as I've noticed. but when maximizing and restoring the window i end up with two scroll-bars.
How can i solve this preferably using CSS?
Maybe this works out for you:
html, body { overflow: hidden; }
Try changing your overflow
overflow: auto;
to:
overflow: hidden;
When I do the following:
<asp:Label CssClass="someField" runat="server">*</asp:Label>
<asp:Label ID="someID" runat="server" Text="SomeText" AssociatedControlID="someACID"></asp:Label>
Or:
<span class="someField">*</span>
<asp:Label ID="someID" runat="server" Text="SomeText" AssociatedControlID="someACID"></asp:Label>
Css someField:
span.someField {
color: #CC0000;
font-weight: 600;
}
Css for label:
form label {
clear: left;
cursor: pointer;
display: block;
float: left;
font-size: 1em;
margin: 0 3px 4px 0;
padding: 4px 0 4px 5px;
width: 200px;
}
the output I get is
SomeText*
When what I want is
*SomeText
Anyone know why this is happening?
By setting float:left on the label you are taking it out of the flow of the document and causing it to render before the span. You need to either set the span to be a block layout and float it left as well or remove the float from the label.
UPDATE:
There's a good description of what floating does to elements and some considerations here: http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
Another option
form label:after {
content: "*";
}