Update: here is the full code: codepen
I have below HTML: here is the full code
<input id="id1" value="planner" type="checkbox" />
<label for="id1">Name</label>
Before the label I want to insert an icon so I have the below the CSS file.
input[type=checkbox] + label:before {
#include custom_square;
content:'';
display: inline-block;
}
my custom icon mixin is as below:
#mixin custom_square {
width: 10px;
height: 10px;
border-radius:20%;
border:1px solid #0069aa;
margin-right:0.3rem;
&:focus::after {
border:1px solid #ffffff;
}
}
now when user focus the lable it does color change the css for it as below:
input[type=checkbox]:focus + label,
input[type=radio]:focus + label {color: #fff;}
Also, I want to change the border color of the square to white on the focus of it, I have added &:focus::after pseudo element in the mixin custom_square but it seems it is not working, any clue?
P.S: I don't want to use font-awesome icons, instead I will be creating my own icons and would be inserting that as shown above:
Related
I've been trying to change the background color of the popover body but it's not changing the color. If I remove scoped from styles then it works but when I use scoped and use deep selector, the color doesn't apply.
This is my code
<template>
<div>
<button
:id="callToAction"
>click me
</button>
<b-popover
:target="callToAction"
triggers="click blur"
custom-class="my-popover-class"
>
<div>Edit Me</div>
</b-popover>
</div>
</template>
<style scoped>
*>>>.my-popover-class {
background: black !important;
color: white !important;
}
*>>>.my-popover-class .popover-body {
color: white !important;
background: black !important;
}
</style>
I am familiar with this issue because I use Bootstrap-vue for almost all of my projects.
If I have to override any of the bootstrap components, I just simply remove the scoped from style. If you need to use scoped and also want to override bootstrap components then you should select its wrapper selector and nest it.
For the first selector, you shouldn't need a deep selector, as the class is added to the root element of the popover, which has the data-v-**** attribute from the scoped tag.
The second one you'll need one, but you need to place it after .my-popover-class. That way your selector will be rendered as .my-popover-class[data-v-****] .popover-body, which should work.
<style scoped>
.my-popover-class {
background: black !important;
color: white !important;
}
.my-popover-class >>> .popover-body {
color: white !important;
background: black !important;
}
</style>
Example on codesandbox
I am using vue carousel and I want to change tge color of the pagination dots' borders. I don't know how and if it's even possible. I looked up the style of this buttons in dev tools and tried to rewrite the style. But nothing works
vue-carousel has two properties that control the color of the dots:
paginationColor - (default: #000000) The fill color of the active pagination dot. Any valid CSS color is accepted.
paginationActiveColor - (default: #efefef) The fill color of pagination dots. Any valid CSS color is accepted.
For example:
<carousel paginationColor="gray" paginationActiveColor="red">
demo
Try this in your global CSS
.v-carousel__controls__item{
color: #FFC400 !important;
}
There is a work-around that can give you full control over the dots and their appearance with pure CSS, using pseudo-elements. Make the existing dots transparent, and use ::after to create new dots that you can style as you like.
.VueCarousel-dot {
position: relative;
background-color: transparent !important;
&::after {
content: '';
width: 10px;
height: 10px;
border-radius: 100%;
border: 2px solid black;
background-color: gray;
position: absolute;
top: 10px;
left: 10px;
}
&--active::after {
background-color: red;
}
}
This is not an ideal solution, however the provided options for styling dots in Vue Carousel are quite limited, and if you have a strict style guide to follow, this solution can give you the control you need.
I am using the element to upload image files to my hosted Blazor WASM site. The component renders a button with the words "Choose Files" on it.
I would like to replace this button with an image (or my own text, or anything else). I have tried using CSS to set a background image to the URL of an image I would want to use, and set the background-color of the button to "transparent", but this does not seem to change anything.
The source code for this component can be found here:
https://github.com/SteveSandersonMS/BlazorInputFile
I studied the code and found that this component is built using the standard Blazor input type.
<input type=file>
Steve shows a way to override the default functionality and style of the button using CSS.
Here is an example I created based on what I found:
<style>
.file-input-zone {
display: flex;
align-items: center;
justify-content: center;
background-color: blue;
color: white;
cursor: pointer;
position: relative;
width: 120px;
height: 30px;
}
.file-input-zone:hover {
background-color: lightblue;
}
.file-input-zone input[type=file] {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
</style>
<div class="file-input-zone">
<InputFile />
Get me a file!
</div>
It will give you a button that looks like this:
You might pick up more tips by studying his source code further.
In elementUI, I've got a el-menu component and there is a el-submenu in it,
I can change the bg-color of el-menu-item when I hover it and I code like
.el-menu-item:hover {
background-color: black;
color:white
}
however when I do the same to the el-submenu, it failed
.el-submenu:hover{
background-color: black;
color:white;
}
I tried another way
.el-submenu.is-opened {
background-color: black;
color:white;
}
also can't work
it appears like that
and I want to change the bg-color when I hover the submenu and when it is open
I had the same problem and found that you can do the following to change the background color when hovering over a el-submenu:
.el-submenu__title:hover {
background-color: #000 !important;
}
I would like to customize my tooltip for my table and I used the following example :
https://datatables.net/beta/1.9/examples/advanced_init/events_post_init.html
I copied CSS and JS tooltip file but my tooltip look like a default one.
How can I customize my tooltip ? Do you have examples ?
Cheers
There is nothing fancy about it, really. It is just a <div> following the mouse showing some content. You can use one of the zillion tooltip / popover plugins out there, or you can do it by yourself. Here is an example showing the content of a hovered row in a "tooltip" :
#tooltip {
position: absolute;
z-index: 1001;
display: none;
border: 2px solid #ebebeb;
border-radius: 5px;
padding: 10px;
background-color: #fff;
}
event handlers
$('#example').on('mousemove', 'tr', function(e) {
var rowData = table.row(this).data().join(',')
$("#tooltip").text(rowData).animate({ left: e.pageX, top: e.pageY }, 1)
if (!$("#tooltip").is(':visible')) $("#tooltip").show()
})
$('#example').on('mouseleave', function(e) {
$("#tooltip").hide()
})
demo -> http://jsfiddle.net/0g2axdt5/
The use of animate() is to avoid flicker.