When I use Material Icons, I can switch the style by replacing the class name. (between material-icons and material-icons-outlined)
Now I am trying to use Material Symbols. Let's say I use star icon and want to make the icon filled.
public/index.html
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD#48,400,1,0" />
<span class="material-symbols-outlined">
star
</span>
For Material Symbols, the class name will be the same between filled and outlined and I am wondering if I can switch the style programaitically.
You can use the CSS font-variation-settings property to set the symbol style per element. Check the codepen example here: Variable font with Google Fonts.
I used example code found in Google: Material Symbols guide and modified it to create a little demo showcasing how to set the symbol style using a CSS custom property.
define a CSS custom property --variation
modify the custom property with Javascript to hold required font-variation-settings
use the current custom property value in CSS to set required symbol style:
unset: sets it to the Google default setting for .material-symbols-outlined
thin style: font-variation-settings: 'FILL' 0, 'wght' 100, 'GRAD' 0, 'opsz' 48
filled style: font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48
snippet give the symbol font file time to load...
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD#20..48,100..700,0..1,-50..200" rel="stylesheet" />
<style>
:root { --variation: unset } /* Sets it to default Google settings */
.icons { font-variation-settings: var(--variation) } /* Use current settings */
.icons > * { font-size: 3.5rem }
</style>
<fieldset>
<legend> Icon Style </legend>
<label for="outline">
<input id="outline" class="radio" type="radio" name="group" checked
oninput="document.documentElement.style.setProperty('--variation', `unset`);">
outlined
</label>
<label for="thin">
<input id="thin" class="radio" type="radio" name="group"
oninput="document.documentElement.style.setProperty('--variation', `'FILL' 0, 'wght' 100, 'GRAD' 0, 'opsz' 48`);">
thin
</label>
<label for="filled">
<input id="filled" class="radio" type="radio" name="group"
oninput="document.documentElement.style.setProperty('--variation', `'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48`);">
filled
</label>
<br><br>
<div class="icons">
<span class="material-symbols-outlined">search</span>
<span class="material-symbols-outlined">home</span>
<span class="material-symbols-outlined">settings</span>
<span class="material-symbols-outlined">favorite</span>
</div>
</fieldset>
Related
I have a number of [input type checkbox] with corresponding labels, for example:
<div>
<input id="idOne" type="checkbox" checked>
<input id="idTwo" type="checkbox">
</div>
<div>
<label for="idTwo">One</label>
<label for="idTwo">Two</label>
</div>
The label/input are connected with the [for] property. I need to style the lable based on the [checked]-status of the checkbox. Can this be done WITHOUT a combinator as the structure makes using child/sibling combinators a poor choice.
Somthing along the lines of:
label[input:checked = "true"]{
color:pink;
}
Can this be done in a stable fashion with css or will I need to add/remove a classs with JS?
THX in advance :)
I have tried to write a selector that will target the label of a checked input element (type="checkbox").
Yes, you can apply CSS to the label on the input checked status.
input[type=checkbox] + label {
color: #ccc;
font-style: italic;
}
input[type=checkbox]:checked + label {
color: #0964aa;
font-style: normal;
}
<input type="checkbox" id="idname" name="cb_name">
<label for="idname">CSS is Awesome</label>
When applying checked="checked" to a radio input the corresponding CSS does not seem to work (:checked)
What am I missing?
....
Try using checked only without the colon in front of it.
Kendo controls can sometimes be a bit difficult when trying to override their provided styles. If I correctly understood your question and example, it seems you are trying to change the background and border properties of the entire radio button control?
In the case of your given example, you'll need to target the label for the control, not the control itself. To do this, you can use the Adjacent Sibling Selector to select the label for the control since in your example it is positioned immediately after the control you are targeting. This looks like: .k-radio:not(:checked) + label.k-radio-label in the example I provided below.
input[type=radio],
input[type=checkbox],
input.k-checkbox,
input.k-radio {
width: 16px;
height: 16px;
}
input[type=checkbox]:not(:checked),
input[type=radio]:not(:checked),
.k-checkbox:not(:checked),
.k-radio:not(:checked)+label.k-radio-label {
background-color: #EBF1FD;
border-color: #B8D8F7;
border-width: 1.5px;
}
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.rtl.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.mobile.all.min.css" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"></script>
<label>Kundentyp</label>
<div class="input">
<input type="radio" name="kndtyp" id="kndtyp0" class="k-radio ng-pristine ng-untouched ng-empty ng-invalid -ng-invalid-required" ng-disabled="info.contact.usr" ng-value="'0'" ng-model="info.contact.kndtyp" required="required" checked="checked" value="0">
<label class="k-radio-label" for="kndtyp0">naturlich</label>
<input type="radio" name="kndtyp" id="kndtyp1" class="k-radio ng-pristine ng-untouched ng-valid ng-empty" ng-disabled="info.contact.usr" ng-value="'1'" ng-model="info.contact.kndtyp" required="required" checked="checked" value="1">
<label class="k-radio-label" for="kndtyp1">juristisch</label>
</div>
I am using bootstrap 5 to create a form with floating input.
Here is an input I use:
<div class="form-floating mx-auto mb-3 w-25">
<input type="text" class="form-control" id="username_field" placeholder=" " />
<label for="username_field" class="form-label">Username</label>
</div>
This code generate a floating input like so:
floating input
I would like to change the color of the label when the input is selected (using only css, if possible).
You could try something like the following to affect all inputs or modify the following to use id's/classes if you only want it specifically for this one input:
input:focus + label {
color: orange;
}
When it will be focus on your input element, at the time of focus use + selector to select the label next to it and give whatever color to it you want.
Read it here about selectors.
if you need something else, pls feel free to comment
.form-control:focus + .form-label {
color: red;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<div class="form-floating mx-auto mb-3 mt-3 w-75">
<input type="text" class="form-control" id="username_field" placeholder=" " />
<label for="username_field" class="form-label">Username</label>
</div>
<s:checkboxlist list="fruits" name="selectfruits" listKey="id" listValue="description" id="fruitsid">
Suppose I have the above checkboxlist that contains multiple checkboxes. I would like to change the background color to grey and the color of the label to white when the mouse hovers upon the respective checkbox or its label. How would I achieve this by changing its style in the css?
I tried the following in the css file by referring the checkboxlist's id but it does not work:
#fruitsid:hover {
color:white;
background-color:grey;
}
The generated HTML for the above code:
<input type="checkbox" name="selectfruits" value="Apple" id="selectfruits-1">Apple
<br/><br/></input>
<input type="checkbox" name="selectfruits" value="Melon" id="selectfruits-2">Guava
<br/><br/></input>
<input type="checkbox" name="selectfruits" value="Orange" id="selectfruits-3">Orange
<br/><br/></input>
<input type="checkbox" name="selectfruits" value="Guava" id="selectfruits-4">Grapefruit
<br/><br/></input>
<input type="checkbox" name="selectfruits" value="Pineapple" id="selectfruits-5">Melon
<br/><br/></input>
Is there any way where you can refer each label and change its css style like the one mentioned above?
Thanks!
You can use CSS3 startswith selector:
input[id^="selectfruits"]:hover{
/* your custom style here */
}
BTW checkboxes (and radiobuttons too) are special items, rendered differently basing on Browser / Operative System, and hard to style with CSS only.
The snippet above is correct to target an item (even a checkbox or a radiobutton), but the problem is that then you can't do what you ask. You could change the size or the position, for example, but not the color / background-color, because they don't have those properties.
There are several solutions to this, but the two most famous are:
Hiding the real checkbox and then showing another element (a span with an image, usually):
This is used when a crossbrowser/cross-OS rendering is mandatory, and/or when there is the need to show a better / different graphical object (I've used checkboxes with lock/unlock symbols, for example). But I guess it's not your case.
Wrapping the checkbox in another element (eg. a div) and then styling that element:
this appears to be your case. There is no need to wrap it in a div, btw, a label element next to the checkbox is enough for your case. The problem is that <s:checkboxlist/> tag is generating the HTML for you, without the labels, then you should avoid using this tag in order to be able to add your custom HTML;
change your tag with single checkboxes tags generated inside an iterator... or just with plain HTML elements, to keep it simple:
<s:iterator value="fruits" status="ctr">
<input type="checkbox"
name="selectfruits"
class="chkFruits"
value="<s:property value='%{id}'/>"
id="selectfruits-<s:property value='%{#ctr.count}'/>">
<label for="selectfruits-<s:property value='%{#ctr.count}'/>" class="lblFruits">
<s:property value='%{description}'/>
</label>
<br/><br/>
</s:iterator>
that will generate the following output, that you can style with standard selectors:
.chkFruits:hover + .lblFruits {
background-color: blue;
color: white;
}
<input type="checkbox" name="selectfruits" value="AWARD"
id="selectfruits-1" class="chkFruits" />
<label for="selectfruits-1" class="lblFruits">Apple</label>
<br/><br/>
<input type="checkbox" name="selectfruits" value="CLIST"
id="selectfruits-2" class="chkFruits" />
<label for="selectfruits-2" class="lblFruits">Guava</label>
<br/><br/>
<input type="checkbox" name="selectfruits" value="HAN"
id="selectfruits-3" class="chkFruits" />
<label for="selectfruits-3" class="lblFruits">Orange</label>
<br/><br/>
<input type="checkbox" name="selectfruits" value="POS"
id="selectfruits-4" class="chkFruits" />
<label for="selectfruits-4" class="lblFruits">Melon</label>
<br/><br/>
This answer works for all check in my webpages!
input[type="checkbox"]:hover + label {
color: #fff;
border-color: #1b7aa9;
background-color: #239fdb;
}
I have made a form with different inputs.
One of these allow to choose a date, made with this very nice package:
http://www.eyecon.ro/bootstrap-datepicker/
The only problem is that all the form fields have the default blue focus:
.uneditable-input:focus {
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
outline: thin dotted \9;
...
}
But the field made with Bootstrap-Datepicker has a yellow default focus, that I am not able to modify.
How can I remove that style and apply the default bootstrap style, so to obtain consistency?
Assuming that you're using the latest Bootstrap 3, you just need to add the form-control class to your inputs and it will override the datepicker's yellow outline. I also wrapped the inputs inside `col-md-3' since Bootstrap 3 no longer defines a specific width for inputs.
<div class="input-append date ">
<div class="col-md-3">
<label>Arrival Date</label>
<input name="arrival" class="form-control datepicker" data-date-format="dd/mm/yyyy" id="checkin" placeholder="click here">
</div>
</div>
<div class="input-append date">
<div class="col-md-3">
<label>Outgoing Date</label>
<input name="outgoing" class="form-control datepicker" data-date-format="dd/mm/yyyy" id="checkout" placeholder="click here">
</div>
</div>
http://bootply.com/86834
EDIT:
For Bootstrap 2.x just make sure you add type="text" to your inputs and it will show the blue outline. I've update the Bootply.