I want to change the ng-dropdown-panel style but its only styles the container.
components.css
.ng-select.dropdown ::ng-deep .ng-select-container {
min-height: 0px;
border-radius: 10;
background-color: #343A40;
color: white;
}
.ng-select.dropdown ::ng-deep .ng-dropdown-panel {
background-color: #343A40;
color: white;
}
component.html
<ng-select class="dropdown" [items]="data" bindLabel="data" bindValue="dbValue"></ng-select>
https://stackblitz.com/edit/angular-stq6ew
Related
I have added a vue multiselect component... But I want to customize it with css styles. I already have added some css style but can not do everything I want. Like I want to change the option height, select box height, color of selected items/cross button etc. How can I do those things. What are the class names of those elements and how can I modify those things.
<multiselect
v-model="value"
:options="options"
:multiple="true"
:close-on-select="false"
:clear-on-select="false"
:preserve-search="true"
:hide-selected="true"
:option-height="10"
class="min-w-200 w-full mb-2"
open-direction="bottom"
placeholder="--Select One or More--"
:show-labels="false"
label="name"
track-by="name"
:preselect-first="true"
>
<span
slot="selection"
slot-scope="{ values, search, isOpen }"
class="multiselect__single"
v-if="values.length && !isOpen"
>{{ values.length }} options selected</span
>
</multiselect>
I have created this so far.
Here is my css code:
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
<style lang="scss" >
.multiselect__tag {
color: rgb(48, 48, 48);
background-color: rgba(var(--vs-primary), 0.3);
font-size: 01rem;
}
.multiselect__tag:hover {
background-color: rgba(var(--vs-warning), 0.3);
}
.multiselect__option--disabled {
background: purple;
color: rgba(var(--vs-primary), 1);
font-style: italic;
}
.multiselect__option--highlight {
background-color: rgba(var(--vs-primary), 1);
color: rgb(255, 255, 255);
font-size: 0.9rem;
height: 1rem;
}
.multiselect__content {
background: rgb(255, 255, 255);
color: #444;
font-size: 0.9rem;
}
.multiselect__single {
height: 0.8rem;
font-size: 01rem;
color: #444;
}
.multiselect__tag {
position: relative;
display: inline-block;
padding: 0.25rem 1.625rem 0.25rem 0.625rem;
margin-right: 0.625rem;
line-height: 1;
margin-bottom: 0.5rem;
}
</style>
The text color only changes when I hover over the text. I want the text color to change to white when I hover over the button.
Can anyone see where I am going wrong, please?
#callbtn {
border: 1px solid #507487;
background-color: white;
padding: 10px;
font-size: 20px;
color: #507487;
border-radius: 10px;
font-weight: bold;
text-align: center;
}
#callbtn:hover {
background-color: orange;
color: white;
border: 1px solid orange;
cursor: pointer;
}
#callbtn a {
color: #507487;
}
#callbtn a:hover {
color: white;
}
#media screen and (max-width: 768px) {
#callbtn {
font-size: 14px;
}
}
#callbtn i {
padding-right: 10px;
}
<p class="m-2 text-center" id="callbtn"><i class="fas fa-phone-volume"></i>Call</p>
Your CSS need to apply the color on hover of the button, not the hover of the link
#callbtn:hover a {
color: #FFF
}
callbtn:hover triggering when the button is hovered over, and a:hover is triggering when the link is hovered over. Which is why this is happening, you are hovering over the button but not setting the colour of the link. The CSS below will set a style to the child link when button is hovered over.
#callbtn:hover a {
color: white;
}
It would be more efficient to set your button up like this:
.callbtn {
display: block;
border: 1px solid #507487;
background-color: white;
color: #507487;
padding: 10px;
text-decoration: none;
border-radius: 10px;
text-align: center;
font-weight: bold;
font-size: 20px;
}
.callbtn:hover {
border: 1px solid orange;
background-color: orange;
color: white;
}
.callbtn i {
padding-right: 10px;
}
#media screen and (max-width: 768px) {
.callbtn {
font-size: 14px;
}
}
<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet"/>
<a class="callbtn" href="tel:+441225xxxxxx">
<i class="fas fa-phone-volume"></i>Call
</a>
It's a bit weird but some JavaScript solves the problem:
var callButton = document.body.querySelector("#callbtn");
var callButtonLnk = document.body.querySelector("#callbtn a");
callButton.addEventListener("mouseover", function(){
callButtonLnk.style.color = "white";
})
callButton.addEventListener("mouseout", function(){
callButtonLnk.style.color = "#507487";
})
I have a ng-select field in my HTML, i want to apply some part of css to that, Here i am using scss, i am not getting how to transverse these codes to the class i had given, Can anyone help me to sort it out.
Scss:
.box {
background-color: #4389a9;
width: 185px;
height: 45px;
padding: 8px 20px;
right: -19px;
cursor: pointer;
top: 19px;
transition: bottom 2s;
border-radius: 24px;
margin-bottom: 26px;
select-dropdown {
display: none;
}
}
HTML:
<ng-select class="box" placeholder="Wiredelta" [options]="cities">Wiredelta</ng-select>
CSS part to be added to scss:
ng-select > div > div.single > div.toggle {
color: white !important;
background: none;
}
ng-select > div {
border:none !important
}
ng-select > div > div.single > div.placeholder {
color: white;
font-size: 35px;
font-family: MontserratRegular;
}
ng-select > div > div.single > div.clear:hover, ng-select > div > div.single > div.toggle:hover {
background-color: #4389a9;
}
select-dropdown {
display: none;
}
Note:
If you are using angular cli it wont work if you add in component scss files.
To make it work, add them in styles.scss
Here is the scss you needed,
ng-select {
>div {
>div.single {
>div.toggle {
color: white !important;
background: none;
&:hover {
background-color: #4389a9;
}
}
>div.placeholder {
color: white;
font-size: 35px;
font-family: MontserratRegular;
}
>div.clear {
&:hover {
background-color: #4389a9;
}
}
}
border: none !important;
}
}
select-dropdown {
display: none;
}
Suppose we want to change the styling of appearance outline :
we can override the css as :
.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,
.ng-dropdown-panel
.ng-dropdown-panel-items
.ng-option.ng-option-selected.ng-option-marked {
color: #26808a !important;
}
.ng-select.ng-select-focused .ng-select-container:after {
border-color: #26808a !important;
}
.ng-select.ng-select-focused .ng-select-container.ng-appearance-outline:after,
.ng-select.ng-select-focused
.ng-select-container.ng-appearance-outline:hover:after {
border-color: #26808a !important;
}
.ng-select.ng-select-focused
.ng-select-container
.ng-value-container
.ng-placeholder {
transform: translateY(-1.28125em) scale(0.75) perspective(100px)
translateZ(0.001px);
color: #26808a !important;
}
.ng-select.ng-select-focused .ng-select-container .ng-arrow-wrapper .ng-arrow {
color: #26808a !important;
}
.ng-select .ng-select-container.ng-appearance-outline {
min-height: 51px !important;
}
ng-select tag:
<ng-select
[items]="listofBanks"
[(ngModel)]="selectedCity"
bindLabel="firstName"
bindValue="id"
[searchFn]="customSearchFn"
(change)="onSelection($event)"
appearance="outline"
class="custom"
></ng-select>
Note: Works fine with "#ng-select/ng-select": "^5.0.4"
When I put a button tag on "sign up" it doesn't take me to the page I set up, but when I remove the button tag, it works.
Buttons with href won't work. Especially on the "sign up" button. But the other buttons are working. Does anybody know what the problem is?
.button {
background-color: #4CAF50;
/* Green */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
width: 70px;
height: 30px;
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
background-color: #ccd9ff;
color: black;
border: 2px solid #555555;
}
.button1:hover {
background-color: #808080;
color: white;
}
.button2 {
background-color: #ccd9ff;
color: black;
border: none;
}
.button2:hover {
background-color: ffcccc;
color: white;
}
.button3 {
background-color: #ccd9ff;
color: black;
border: none;
}
.button3:hover {
background-color: #ff99e6;
color: white;
}
.button4 {
background-color: #ccd9ff;
color: black;
border: none;
}
.button4:hover {
background-color: #ff9999;
}
.button5 {
background-color: #ccd9ff;
color: black;
border: none;
}
.button5:hover {
background-color: #ffb399;
color: white;
}
.button6 {
background-color: #ccd9ff;
color: black;
border: none;
}
.button6:hover {
background-color: #9999ff;
color: white;
}
.button7 {
background-color: #ccd9ff;
color: black;
border: none;
}
.button7:hover {
background-color: #ccccff;
color: white;
}
.button8 {
background-color: #ccd9ff;
color: black;
border: none;
}
.button8:hover {
background-color: #ffffcc;
color: white;
}
<form id="searchbox" action="">
<input id="search" type="text" placeholder="Search Anime">
<button class="button button1" id="submit" type="submit" value="Search">Search</button>
<FONT face="Comic Sans MS" COLOR="#ff4d4d" SIZE=2>Login</FONT> or
<A HREF=register.html style="text-decoration:none">
<button class="button button8" <FONT face="Comic Sans MS" COLOR="#ff4d4d" SIZE=2>Sign Up</FONT><Button>
</A>
</form>
you should close the anchor tag and use quotes around the link
my link
PS use lowercase for tag eg: <a> and attribute eg: href
Try
<input type="submit" class="button button8" value="Sign Up">
Style it via external CSS rather than inline.
I'd say that's because HTML doesn't work that way... I advise you to follow some W3C Tutorial.
Start off here: https://www.w3schools.com/tags/tag_button.asp
Anyway, the main problem I think it's that, in the DOM Tree, you can't have inline elements (such as ) containing block elements (such as )
So with I'd add an onclick attribute, rather than putting the button inside an
Also, to be sure with HTML, always use this syntax:
Note the lowercase, and the quoting marks!
I'm trying to style a HTML submit button in CSS:
HTML:
<input type="submit" value="Yes" id="popUpYes">
CSS:
#popUpYes
{
width: 60px;
height: 30px;
background-color: black;
}
#popUpYes:hover
{
background-color: white;
}
The basic style works but the background does not change color on hover.
Your original code works for me. Be sure you don't have any other conflicting styles inherited by the submit button.
Try this JSfiddle
Try this:
#popUpYes {
width: 60px;
height: 30px;
background-color: black;
color: white;
/* SET COLOR IN WHITE */
}
#popUpYes:hover {
background-color: white;
color: black;
/* SET COLOR IN BLACK */
}
<input type="submit" value="Yes" id="popUpYes">
You have to assign the color - attribute for the text.
I tried this in Chrome and it worked.
#popUpYes {
width: 60px;
height: 30px;
background-color: black;
color: #fff;
}
#popUpYes:hover {
background-color: white;
}
<input type="submit" value="Yes" id="popUpYes">
As per your question "The basic style works but the background does not change color on hover." , this happens only when you set your BackColor or background-color through properties. your code works fine because you have used css class instead of properties.
The code as it is now working -> http://jsfiddle.net/2wYqd/ What is your browser?
#popUpYes {
width: 60px;
height: 30px;
background-color: black;
}
#popUpYes:hover {
background-color: white;
}
My work may be of use to you in this regard.
input[type=submit] {
background-color: #42b72a;
color: white;
border: 5px solid #42b72a;
width: 200px;
}
#kayitol:hover {
box-shadow: 0 0 10px #0099ff;
font-weight: bold;
color: black;
}
input[type=reset] {
background-color: #FF8A80;
color: white;
border: 5px solid #FF8A80;
width: 120px;
}
#iptal:hover {
box-shadow: 0 0 10px #FF3C41;
font-weight: bold;
color: black;
}
<input type="submit" id="kayitol" value="Kayıt Ol">
<input type="reset" id="iptal" value="Vaz Geçtim">
Working fine link
#popUpYes {
width: 60px;
height: 30px;
background-color: black;
color:white;
}
#popUpYes:hover {
background-color: white;
color: black;
}