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>
Related
I am trying to style element plus' el-radio-button in a el-radio-group to have different colours. It is not available by the el-radio-button properties, so I'm trying to target the rendered html elements. When I inspect my webpage, something like the following is shown:
<label class="el-radio-button" role="radio" aria-checked="false" aria-disabled="false" tabindex="-1" data-v-bf51d4b2="" style="color: red;">
<input class="el-radio-button__original-radio" type="radio" name="" tabindex="-1" value="Karthus">
<span class="el-radio-button__inner">Karthus</span>
</label>
The styles are applied on label.el-radio-button and span.el-radio-button__inner but I can't seem to target them using the following styles in my sfc:
<style lang="scss" scoped>
.el-radio-button {
color: red;
padding: 20em;
.el-radio-button__inner {
color: blue;
&:hover {
color: red;
}
}
}
</style>
None of these are applying. I can't really tell whether it's because of specificity, or just overrides, etc. !important on the color properties also don't seem to apply. Is there a way to properly target the rendered html elements in the sfc style?
Use more specific css selectors and it should work
<style>
.el-radio-group .el-radio-button {
color: red;
padding: 20em;
}
.el-radio-group .el-radio-button__inner {
color: blue;
}
.el-radio-group .el-radio-button__inner:hover {
color: red;
}
</style>
example
I like the style of the default buttons from pre-Bootstrap 4. In order to try to make my own I came up with the following SASS:
.btn-default {
#extend .btn;
border-color: #A5A5A5;
}
.btn.btn-default:hover,
.btn.btn-default:focus,
.btn.btn-default:active,
.btn.btn-default.active {
color: #808080;
}
This works as expected if I used a <button> tag but not if I use a <a> tag. Why wouldn't this work on both?
<a href="#" class="btn btn-default">
Test Anchor
</a>
<button type="submit" class="btn btn-default">
Test Button
</button>
Why would this not work on the anchor tag when you can normally assign a .btn class to an anchor tag and it will style it like a button?
I don't think you need to #extend .btn since you're already using .btn.
All the other btn-* variations have a color, background-color and border-color, so in CSS you could create a btn-default with:
.btn-default{
color:#333;
background-color:#bbb;
border-color:#a5a5a5
}
.btn.btn-default:hover,
.btn.btn-default:focus,
.btn.btn-default:active,
.btn.btn-default.active {
color: #808080;
}
The Bootstrap SASS way would be to use the button-variant #mixin...
.btn-default {
#include button-variant(#bbb, #a5a5a5, #bbb, darken(#bbb, 10%), darken(#bbb, 10%), darken(#bbb, 12.5%))
}
Demo: https://www.codeply.com/go/CWJidmeI1D
Here are the params for the button-variant mixin:
button-variant($background, $border, $hover-background, $hover-border, $active-background, $active-border)
<a> tag doesn't have the behavior of a button. Inorder make it try the following code
a.btn{
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
text-decoration: none;
color: initial;
}
I'm a CSS/bootstrap learner so forgive me if this is a nonsense question....
I have a button on screen with classes "btn btn-outline-primary" applied.
Upon some event occurring in my component(Angular2) I apply my "button-invisible" class, which sets display to "none" but this doesn't happen. The button remains visible. When I check in dev tools I see that the class is applied(and I can change other style properties such as font-style etc...) but the "display: none;" is not enabled, it is struck through.
Can someone advise on why my class would be applied but certain aspects/properties overridden? The only way I can make this class function as I expect is by adding the !important rule.
Cheers
.btn from bootstrap _buttons.scss
.btn {
display: inline-block;
font-weight: $btn-font-weight;
line-height: $btn-line-height;
text-align: center;
white-space: nowrap;
vertical-align: middle;
user-select: none;
border: $input-btn-border-width solid transparent;
#include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius);
#include transition($btn-transition);
// Share hover and focus styles
#include hover-focus {
text-decoration: none;
}
&:focus,
&.focus {
outline: 0;
box-shadow: $btn-focus-box-shadow;
}
// Disabled comes first so active can properly restyle
&.disabled,
&:disabled {
cursor: $cursor-disabled;
opacity: .65;
#include box-shadow(none);
}
&:active,
&.active {
background-image: none;
#include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
}
}
my class that I am applying conditionally using ngClass...
.add-button-invisible {
display: none !important;
}
Markup where applying class:
<div class="row">
<button [ngClass]="addingNew === true ? 'add-button-invisible' : 'add-button-visible'" class="btn btn-outline-primary" (click)="addNew()">+Add {{entityType}}</button>
</div>
Bootstrap has a bigger priority, so your styles not working. You can add !important to your rule to override bootstrap rule. For example:display: block!important;
can you try to add : !important behind it, maybe the calss is not specific enough, by adding important to it css makes it more important. :)
btn class has display:inline-block, it overrides your custom class's display:none. If your custom class is going to apply only display: none;, then you can use bootstrap class hidden instead of going for custom one. check below snippet for reference.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn">Button Show</button>
<button type="button" class="btn hidden">Button Hidden</button>
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;
}
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
}