Is there any way to change scrollbar thumb color on v-autocomplete drop-down.
Tried to used ::-webkit-scrollbar-thumb on menu contentClass - not working.
<v-autocomplete
class="search-field"
color="green"
outlined
v-model="selectedProducts"
:loading="loading"
:menu-props="{ contentClass: 'search-dropdown' }"
item-text="name"
item-value="name"
:items="searchingProducts"
:search-input.sync="productSearchInput"
:height="40"
placeholder="Всі"
clearable
flat
hide-no-data
cache-items
:rounded="false"
label="Який продукт шукаєш?"
>
<style lang="scss" scoped>
.search-dropdown::-webkit-scrollbar-thumb {
background-color: red !important;
}
enter image description here
Related
I'd like to increase the height of the Vuetify v-autocomplete, which is fixed at 304px (might be a calculated value, YMMV).
<v-autocomplete
class="flex-grow-0 ml-16 mr-6 largecontent"
prepend-inner-icon="mdi-magnify"
v-model="select"
:items="items"
item-text="name"
item-value="id"
:search-input.sync="search"
hide-no-data
label="Search anything (press /)"
>
<template #item="{ item }">
<v-list-item to="item.route">
<v-list-item-content>
<v-list-item-title v-text="item.name"/>
<div
v-if="item.desc"
v-html="item.desc"
/>
</v-list-item-content>
</v-list-item>
</template>
<v-autocomplete/>
These both work, but would apply the style to ALL v-autocomplete, which we don't want:
<style>
.v-autocomplete__content {
max-height: 600px !important;
}
</style>
<style>
.v_menu__content {
max-height: 600px !important;
}
</style>
So, I'd like to either scope it
<style scoped>
.v-autocomplete__content {
max-height: 600px !important;
}
</style>
Or add an entry to my global css file, something like:
.largecontent.v-autocomplete__content {
max-height: 600px !important;
}
But nothing seem to work, also tried the Vuetify deep selectors, but they seem to only work when there's a parent-child hierarchy, which is not the case here.
There is a menu-props property, that you can pass to v-autocomplete in order to customize its dropdown menu (including max-height).
<v-autocomplete :menu-props="{ maxHeight: 500 }">...
Did you tried put the lang=scss and use ::v-deep?
Maybe "deep" helps you to change the style in the way you want
I have a mat-toggle-button-group in a form:
<form [formGroup]="form" class="mb-4">
<mat-button-toggle-group
name="carrier"
aria-label="Choose Carrier"
#carrierSelection="matButtonToggleGroup"
formControlName="carrierChoice"
[value]="carrierChosen"
>
<mat-button-toggle [value]="carrier" *ngFor="let carrier of carriers">
<img alt="Carrier: {{ carrier | uppercase }}" src="/assets/sending/images/carriers/{{ carrier }}/tab-logo.svg" />
</mat-button-toggle>
</mat-button-toggle-group>
</form>
It insists on showing a heavy black border around the button when it is focused, via tab key or clicked.
I inspect the div <div class="mat-button-toggle-focus-overlay"></div> and find this:
So, first I tried this:
.mat-button-toggle-checked .mat-button-toggle-focus-overlay {
border-bottom: 0 !important;
background-color: transparent !important;
}
No luck still a heavy black line, although inspecting it now shows my overrides:
Which I do not understand.
Next, I try this:
.mat-button-toggle-focus-overlay,
.mat-button-focus-overlay {
box-shadow: var(--focus_shadow) var(--focus);
background-color: transparent !important;
border: 0 !important;
}
When I inspect the <div class="mat-button-toggle-focus-overlay"></div> in the app, it actually shows it has my styles:
But the black line persists.
Apparently, Chrome changed the focus treatment recently and Edge Chromium decided to use a heavy black line for focus.
so I wrapped the toggle group in a DIV and set this:
.carrier-toggle {
.mat-button-toggle-label-content,
.mat-button-toggle-button,
.mat-button-toggle {
outline: none !important;
}
}
and then I set my own focus style, with a background color.
.mat-button-toggle,
.mat-button-toggle-group-appearance-standard .mat-button-toggle + .mat-button-toggle {
&:focus {
background-color: var(--rich200);
border: 0;
}
}
I'm trying to change the color of both the label and the text being inputted by the user on a v-text-field. I've tried applying the color prop to it, but it only changes de bottom divider's color. What should I do to get it as I want?
This is my actual code:
<v-text-field label="Search here!" color="blue lighten-1">
<template slot="append">
<v-btn class="blue--text text--lighten-1" flat>
<v-icon>search</v-icon>
</v-btn>
</template>
</v-text-field>
NOTE: I've removed some props as the v-model one, just to increase readability
This and this are the actual results i'm getting. But what i would like is to get the 'Find a user' text on the same blue lighten-1 Material Design color always (not only when there has been no text inputted), as well as such inputted text in the same color (not in black).
Thanks! :)
You can do it by overwriting the CSS default classes:
.custom-placeholder-color input::placeholder {
color: red !important;
opacity: 1;
}
.custom-label-color .v-label {
color: red;
opacity: 1;
}
[EDIT]
You can change the input color to have the text red/any other color:
.custom-placeholder-color input,
.custom-label-color input{
color: red !important;
}
Codepen updated here:
https://codepen.io/fabiozanchi/pen/RmQbBd
I'm tring to change the color of the checkmark inside the ion-checkbox. The checkbox has a white background and the the checkmark is white Im tring to get the checkmark to be black not white. This is what I have so far
.checkbox-icon::before {
background-color: white !important;
}
.checkbox-icon::after {
color: black !important;
}
<ion-item ng-repeat="list in modal.item.modifier_lists | orderBy: 'ordinal'"
ng-if="list.modifier_options[0].name">
<div ng-if="list.modifier_options.length === 1"
class="row">
<div class="col">
<ion-checkbox ng-model="list.modifier_options[0].selected"
ng-checked="list.modifier_options[0].selected"
class="button-orange checkbox-stable">
<span class="pull-right">{{list.modifier_options[0].name}}</span>
</ion-checkbox>
</div>
</div>
</ion-item>
Some of the css- properties you can use to change the coloring of the <ion-checkbox> are
--checkmark-color: black;
--background-checked: white;
--border-color: black;
--border-color-checked: black;
You can find more information in the ion-checkbox documentation
I'm pretty sure you actually have to use border-color to adjust the checkmark color
So to clarify here is what you could do:
Inside your <ion-checkbox> add a custom class of your own custom-checkbox and then for that class do whats below:
.custom-checkbox .checkbox-icon:after {
border-color: //whatever you like it to be
}
That will change the color of the check mark when it is checked.
I'm using the range slider from here: http://materializecss.com/forms.html
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.js"></script>
<form action="#">
<p class="range-field">
<input type="range" id="test5" min="0" max="100" />
</p>
</form>
And I managed to change the color of the "thumb" that pops up when you click on the slider by using this:
input[type=range]+.thumb{
background-color: #400090;
}
And normally I can just inspect the element on chrome and get what class I have to change to change its color. For some reasons I can't figure out how to inspect the "dot" in the slider to find what class I have to add to change its color.
This is what I did to change the dot on the slider and the thumb bubble colors.
Screenshot and snippet attached
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.js"></script>
<style>
input[type=range]::-webkit-slider-thumb {
background-color: red;
}
input[type=range]::-moz-range-thumb {
background-color: red;
}
input[type=range]::-ms-thumb {
background-color: red;
}
/***** These are to edit the thumb and the text inside the thumb *****/
input[type=range] + .thumb {
background-color: #dedede;
}
input[type=range] + .thumb.active .value {
color: red;
}
</style>
<form action="#">
<p class="range-field">
<input type="range" id="test5" min="0" max="100" />
</p>
</form>
.noUi-connect {
background: black;
}
.noUi-horizontal .noUi-handle, .noUi-vertical .noUi-handle {
background: black;
}
.noUi-target.noUi-horizontal .noUi-tooltip {
background-color: black;
}
check out this pen by alexventuraio
you can also do
document.querySelector('.noUi-tooltip').style.background = 'black';
document.querySelector('.noUi-handle').style.background = 'black';
Use querySelector all to change all. CSS [" .noUi-handle{...} and .noUi... "] is not overriding.
I'm new to stack
The easiest way to figure this out is actually by looking through the source code. Hosted here (https://github.com/Dogfalo/materialize/blob/master/forms.html) in line 833 and here (https://github.com/Dogfalo/materialize/blob/master/sass/components/forms/_range.scss) on Github.
Between this and my Chrome DevTools, I have managed to change the background on the range input to #4286f4(substitute for you color) with this CSS declaration:
.noUI-connect {
background: #4286f4 ;
}
You may need to use the !important flag on the property. This changes the color of the slider between the two .thumb elements.
To change the color of the little "thumbs" on the slider:
.range-label{
background-color: desired-color;
}
If you would like to change the grey-color of the background(area outside selection), use this:
.noUI-background {
background: desired-color;
}
Additional Caveat: This solution was only tested on the noUiSlider implementation: http://materializecss.com/forms.html (scroll to Range section). I have not tested this on a plain HTML range element, and sadly need to get back to work.
EDIT:
Having tried to explore solutions on the plain html range input, it appears that there is tag with the class "value" on the slider, as a child of .thumb. Unfortunately, styling this has not led anywhere, leading me to believe that this is either a :before/:after css property, or that your answer lies between lines 73-83 of the 2nd link in the first paragraph.