I would like to style each letter of the word SEND separately. I can't insert HTML into the value field, and I would prefer not to use an image.
<input type="submit" value="SEND" />
I simply would like each letter to be a different color. Do you have any suggestions? Thank you.
Use Lettering.js (http://letteringjs.com/)
It allows you to style each letter according to the CSS specification which isn't fully implemented in browsers.
Check http://codepen.io/FWeinb/pen/djuIx for example, e.g.
And in addition, use button instead of input:
<button type="submit">SEND</button>
button::first-letter {
color: red;
}
EDIT: I created an ugly hack with HTML+CSS only by using button element with span elements: http://cssdeck.com/labs/apkycgyi
<button type="submit">
<span>S</span>
<span>E</span>
<span>N</span>
<span>D</span>
</button>
button {
font-size: 0px;
}
button > span {
font-size: 16px;
}
button span:nth-of-type(1) {
color: red;
}
button span:nth-of-type(2) {
color: blue;
}
button span:nth-of-type(3) {
color: green;
}
button span:nth-of-type(4) {
color: yellow;
}
Related
I am using a framework (vuetify) which by default inserts the following css rule:
[type="button"] {
color: inherit;
}
The problem is that this is always inserted at last and I cannot control that. So if I am using the html <button type="button" class="button">Test</button> with the style .button { color: red; }, the css rule is not used because it gets overriden by the other rule. This means that for all button classes I either have to use another selector like button.button or I have to use !important. Is there another way to globally disable the property color: inherit so that I can still use a class like .button without using a more restrictive selector?
You can get around it by not putting type="button" on your buttons, it has that (button) behaviour by "default".
.button {
color: deepskyblue;
}
.container {
color: deeppink;
}
[type="button"] {
color: inherit;
}
<div class="container">
<button class="button" type="button">What color will I have?</button>
<button class="button">What color will I have?</button>
</div>
I have the following radio button from angular material, and I want to apply some CSS when it has been selected, but the CSS is not working, and I do not know why
however, the :hover works perfectly fine
I have provided both HTML and CSS
could you please help me with this?
.things {
&:focus {
background-color: red;
}
&:hover {
.thing-name {
color: #9c27b0;
}
}
}
<mat-radio-button class="things" *ngFor="let thing of things" [value]="thing.name">
<span class="thing-details">
<img class="thing-image" [src]="thing.logo" [alt]="thing.name" />
<h4 class="thing-name text-center mt-3 pt-3">{{ thing.name }}</h4>
</span>
</mat-radio-button>
I just figured it out.
the following code will both hide the circle of the radio button and changes the color of another element on its selection
::ng-deep.mat-radio-button.mat-accent.mat-radio-checked {
span .thing-name {
border: 1px solid #ffffff !important;
background-color: #28a745 !important;
}
}
// the bellow are for deleting the circle from the radio buttons
::ng-deep .mat-radio-button .mat-radio-container {
width: 0;
}
::ng-deep .mat-radio-container .mat-radio-outer-circle,
::ng-deep .mat-radio-container .mat-radio-inner-circle {
border: none;
width: 0;
}
I need to change color of label when textarea receiving some value.
<form action="#" class="form-reverse">
<textarea name="order-background__bussiness" id="order-background__bussiness" cols="30" rows="10"></textarea>
<label for="order-background__bussiness">What are the company’s objectives?</label>
</form>
When we focusing textarea it works fine with this code:
textarea:focus ~ label{
color: #55c57a;
}
But, I need this color: color: #ff8086; when we don't have any values, and green one(as on image above) when anything written on textarea.
I've tried :active , but it works only when Mouse clicked:
textarea:active ~ label{
color: #ff8086;
}
Maybe someone has a solution for this?
PS: I do have a solution for this with JS , but I'm curious if there is any solution with SASS as well?
You can use the css valid property, it will match if the textarea is a valid field you can set the required attribute and it will match the valid selector if valid...
https://www.w3schools.com/cssref/sel_valid.asp
textarea:valid + label{
background: #ff0000;
}
<textarea required="required"></textarea><label>label</label>
You can also try like this, this will work fine as above:
textarea:not(:invalid) + label{
background: #ff0000;
}
One further option, that avoids making the <textarea>, and other form elements, required is to use the :placeholder-shown pseudo-class; this does, of course, require that a placeholder attribute be set (although it can be set to a whitespace, or zero-length, string):
/* selects a <label> element immediately adjacent to
an element which has its placeholder string visible
to the user: */
:placeholder-shown+label {
color: #f90;
}
/* this selects all <label> elements, but is less specific
than the selector above; so will be 'overridden' in the
event that the previous selector matches: */
label {
color: limegreen;
font-size: 1.5em;
}
*,
::before,
::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-size: 1rem;
}
.form-reverse {
display: flex;
flex-direction: column-reverse;
width: 80vw;
margin: 0 auto;
}
textarea {
width: 100%;
min-height: 30vh;
}
:placeholder-shown+label {
color: #f90;
}
label {
color: limegreen;
font-size: 1.5em;
}
<form action="#" class="form-reverse">
<textarea name="order-background__bussiness" id="order-background__bussiness" placeholder=" "></textarea>
<label for="order-background__bussiness">What are the company’s objectives?</label>
</form>
JS Fiddle demo.
References:
:placeholder-shown (Selectors Level 4 spec).
If I apply the following rule to an input element with id #one then the placeholder color will change,
#one::-webkit-input-placeholder {
color: red;
}
But if I use comma separater to combine placeholder rules of different browsers then the color doesn't apply, e.g.
#two::-webkit-input-placeholder,
#two::-moz-placeholder{
color: red;
}
Working example:
#one::-webkit-input-placeholder {
color: red;
}
#two::-webkit-input-placeholder,
#two::-moz-placeholder{
color: red;
}
<input id="one" type="text" placeholder="one">
<input id="two" type="text" placeholder="two">
Why does the #two placeholder not change its color to red?
This is because a browser will only apply a rule form a selector it can fully interpret.
For a webkit type browser -webkit-input-placeholder is valid but -moz-placeholder is not, so it trashes the entire selector, and vise-versa for a geeko based browser.
The solution is to separate browser specific selectors.
#two::-webkit-input-placeholder{
color: red;
}
#two::-moz-placeholder{
color: red;
}
I know it is now a complete answer, but you could add different classes for each input
#one::-webkit-input-placeholder {
color: red;
}
#two::-webkit-input-placeholder{
color: red;
}
#two::-moz-placeholder{
color: red;
}
<input id="one" type="text" placeholder="one">
<input id="two" type="text" placeholder="two">
I am making a set of buttons for my site, and I am in need of some professional insight.
In order to reduce CSS bloat, I want to subclass my buttons for different colors, ex .button.blue .
Will the following incur issues in the future? (assuming I don't make a class of just .blue)
Do I have to use something like .button.button-blue instead?
.button {
display:inline-block;
padding: 9px 18px;
margin: 20px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-align: center;
background: #FFE150;
}
.button.blue {
background: #49b8e7;
border:1px solid #54abcf;
border-bottom:1px solid #398fb4;
color:#FFF
text-shadow: 0 1px 0 rgba(255,255,255, 0.5);
}
.header{
height: 50px;
}
.header.blue {
background: blue;
color: #fff;
}
What you have there with the multi-classes will work fine assuming you want them to work like so:
<div class="button blue">
Will use .button and .button.blue
</div>
<div class="button">
Will only use .button
</div>
<div class="header blue">
Will use .header and .header.blue
</div>
<div class="header">
Will only use .header
</div>
<div class="blue">
Will use neither of the .blue declarations because it doesn't contain header or button.
</div>
A selector like .button.blue actually selects for an element with that has both "blue" and "button" as classes, not a class called .button.blue. See http://www.w3.org/TR/CSS21/selector.html#class-html.
You can use the .button.blue style rule you have listed, but you'll need to rearrange your HTML so that you have something like <button type="button" class="button blue"/>. However, you don't really need to have a button class since it being a button (or <input type="submit">, etc.) is enough to use in your selector. You could write a CSS rule that is simply button.blue, input[type=submit].blue{}
Seems like button.blue is enough.
The only difference between the two is if you use <button class="button blue">, or <button class="button button-blue">.
You even don't need to duplicate the painting in blue... You can just do something like this:
.button
{
// button style
}
.header
{
// header style
}
.blue
{
background: blue;
color: #fff;
}
Of course if you add the blue class to each of them. (<div class="header blue">and<button class="button blue">)
Combine the classes applying the color you want to theme.
HTML:
<input type="text" class="text-field-required default" .../>
<select class="autocomplete-drop-down blue">...</select>
<a href="#" class="button-link green" .../>
CSS:
.text-field-required {
//component css theme without colors
}
.default {
//default color css theme for any component
}
.blue {
//blue css theme for any component
}
.green {
//green css theme for any component
}