I am making the select2 combo box, I want to remove blue color hover style, but I cannot remove it, does not exit. How can I do it? Please give me a solution, thanks
EXAMPLE
Js
jQuery(document).ready(function($){
$('select').select2({width:100});
$('b[role="presentation"]').hide();
$('.select2-selection__arrow').append('<i class="fa fa-angle-down"></i>');
});
view
<select class="js-example-basic-single">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
CSS
.select2-dropdown.select2-dropdown--below{
width: 148px !important;
}
.select2-container--default .select2-selection--single{
padding:6px;
height: 37px;
width: 148px;
font-size: 1.2em;
position: relative;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
background-image: -khtml-gradient(linear, left top, left bottom, from(#424242), to(#030303));
background-image: -moz-linear-gradient(top, #424242, #030303);
background-image: -ms-linear-gradient(top, #424242, #030303);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #424242), color-stop(100%, #030303));
background-image: -webkit-linear-gradient(top, #424242, #030303);
background-image: -o-linear-gradient(top, #424242, #030303);
background-image: linear-gradient(#424242, #030303);
width: 40px;
color: #fff;
font-size: 1.3em;
padding: 4px 12px;
height: 27px;
position: absolute;
top: 0px;
right: 0px;
width: 20px;
}
Add the following to your CSS code since the code causing the blue hover effect is in a minified css file and is hard to edit:
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: lightgreen !important;
color: white;
}
.select2-container--default .select2-results__option[aria-selected=true] {
background-color: inherit;
}
Here is your updated JSFiddle
If you simply would like to remove the blue background from the element on :hover you can add this line of of code:
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background: inherit;
color: inherit;
}
DEMO
Used to this css for hover and default background-color
html .select2-container--default .select2-results__option--highlighted[aria-selected]{background-color: green;}
html .select2-container--default .select2-results__option--highlighted[aria-selected]{color:#000;}
html .select2-container--default .select2-results__option[aria-selected=true]{background-color:red;}
Demo
add in style
.select2-container--default .select2-results__option[aria-selected="true"]
{
background:#fff;
}
.select2-container--default .select2-results__option--highlighted[aria-selected]
{
background:green;
color:#fff;
}
Related
I have an html code of a button. Inside the button I put a txt but the txt is not they told me that I must put a z-index I don't know how to use displayed
.btnWhite {
display: inline-block;
text-decoration: none;
width: 200px;
height: 60;
line-height: 60px;
font-size: 20px;
font-weight: 700;
text-align: center;
margin-bottom: 135px;
background: #2af598;
background: -webkit-linear-gradient(top right, #2af598, #08aeea);
background: -o-linear-gradient(top right, #2af598, #08aeea);
background: -moz-linear-gradient(top right, #2af598, #08aeea);
background: linear-gradient(top right, #2af598, #08aeea);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.btnGroup {
position: relative;
z-index: 1;
}
<div class="btnGroup">
<a href="#" class="btnWhite">
<form action="essaye.html">
<button type="submit">try</button>
</form>
</a>
<div class="btnGroup">
</div>
Your button text color (-webkit-text-fill-color) is transparent (= invisible) . Remove that or change it.
.btnWhite {
display: inline-block;
text-decoration: none;
width: 200px;
height: 60;
line-height: 60px;
font-size: 20px;
font-weight: 700;
text-align: center;
margin-bottom: 135px;
background: #2af598;
background: -webkit-linear-gradient(top right, #2af598, #08aeea);
background: -o-linear-gradient(top right, #2af598, #08aeea);
background: -moz-linear-gradient(top right, #2af598, #08aeea);
background: linear-gradient(top right, #2af598, #08aeea);
-webkit-background-clip: text;
}
.btnGroup {
position: relative;
z-index: 1;
}
<div class="btnGroup">
<a href="#" class="btnWhite">
<form action="essaye.html">
<button type="submit">try</button>
</form>
</a>
<div class="btnGroup">
</div>
Your form has a linear-gradient background and this is being clipped by text.
However, your button, which is a child of the form, has by default a light gray background so this is covering the form's background.
A simple fix is to give the button a transparent background:
.btnWhite {
display: inline-block;
text-decoration: none;
width: 200px;
height: 60;
line-height: 60px;
font-size: 20px;
font-weight: 700;
text-align: center;
margin-bottom: 135px;
background: #2af598;
background: -webkit-linear-gradient(top right, #2af598, #08aeea);
background: -o-linear-gradient(top right, #2af598, #08aeea);
background: -moz-linear-gradient(top right, #2af598, #08aeea);
background: linear-gradient(top right, #2af598, #08aeea);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
button {
background-color: transparent;
}
.btnGroup {
position: relative;
z-index: 1;
}
<div class="btnGroup">
<a href="#" class="btnWhite">
<form action="essaye.html">
<button type="submit">try</button>
</form>
</a>
<div class="btnGroup">
</div>
However, I suggest a couple of things. The first is to put your code through a validator, it is not correct to have a button inside an anchor element for example.
The second is to work carefully through the setting of that background gradient etc on the form, do you really want it (as opposed to a single color)? If so look up (MDN is a reliable source) exactly what each of those CSS properties mean, and which ones do and which ones don't still require prefixes.
dude remove this
-webkit-text-fill-color: transparent;
color attributes apply for text formats and when you use transparent property for it it not showing because of it's bloody transparent.insted of transparent you can add color what you want
eg:-
-webkit-text-fill-color: black;
I need help with Navigation Bar Menus in Smartphones with CSS
On a computer the website is fine, but on a smartphone it's a white box
The only way I can customize it, is with Additional CSS
I know that most of the code I use is worthless
All I want is to remove the white box in Mobile View
Please see the screenshots
first
The website is at https://www.elans.gr
second
The code I use:
.header-filter-gradient {
background: linear-gradient(45deg, rgb(0,0,0) 0%, rgb(0,0,0) 100%);
}
.header-filter {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
background-position: center center;
background-size: cover;
}
.header-filter-gradient {
background: linear-gradient(45deg, #00000 0%, #00000 100%);
}
.navbar {
background-color: gray;
color: white;
}
.navbar.active {
background-color: #424bf4;
color: white;
}
.navbar.hover:not(.active)
{
background-color: #000;
color: white;
}
just add following css in your style.css
#media (max-width: 768px) {
.navbar.navbar-fixed-top .navbar-collapse {
background: #211818; //color that you need to change
color: red !important; // your text color
}}
I am trying to get a certain effect on a header for a mockup. It has white glow almost not noticeable. You will see it in this picture i provide behind the title and sub title. How can i get that glow effect with css? I do have a header with the entire thing but is that a good idea to use an image for an entire header? Also i want those two lines near the subtitle. Is it possible to code those lines? And last, the button "order now", will that be possible to make with css or should i just use an image of that and link it?
mockup
jsfiddle - http://jsfiddle.net/ezdr3xdg/1/ [what i currently have]
<header>
<h1>Taffies Cupcakes</h1>
<h2>Fresh and tasty</h2>
</header>
body{
background-color:#e7d2c9;
}
header h1{
font-family:georgia;
font-size:46px;
color:#784f3d;
text-align:center;
margin-top:50px;
}
header h2{
font-family:segoe script;
font-size:32px;
color:#846a5f;
text-align:center;
}
All of this is possible to do in CSS 3, I wouldn't recommend it though. Using an image for the button and the header is the best idea if you want it to look the same in all browsers. If you want to do it in CSS anyway try this:
HTML:
<header>
<div class="shadow"></div>
<h1>Taffies Cupcakes</h1>
<h2><div class="line"></div>Fresh and tasty<div class="line"></div></h2>
</header>
CSS:
header > .shadow {
width: 0px;
height: 0px;
margin: 0px 50%;
box-shadow: 0px 0px 200px 100px white;
}
header h2 > .line {
height: 1px;
width: 100px;
margin: 5px 20px;
background-color: #846a5f;
display: inline-block;
vertical-align: middle;
}
As the other answers have mentioned, radial-gradient is probably the way to go here. Just apply it to the header element instead of using my version with box-shadow (which might be a little hacky to some).
Update for the button:
HTML:
<button class="special"><div class="icon"></div><div class="headline">ORDER NOW</div><div class="description">We deliver in 24 hours</div></button>
CSS:
button.special {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #784f3d), color-stop(1, #846a5f) );
background:-moz-linear-gradient( center top, #784f3d 5%, #846a5f 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#784f3d', endColorstr='#846a5f');
background-color:#784f3d;
color: #e7d2c9;
text-align: left;
border: 0;
outline: 0;
border-radius: 5px;
height: 42px;
}
button.special > .icon {
width: 27px;
height: 27px;
/*background-image: url('triangle-button.png')*/
position: absolute;
margin: 5px;
}
button.special > .headline {
margin-left: 42px;
font-size: 18px;
}
button.special > .description {
margin-left: 42px;
font-size: 12px;
}
http://jsfiddle.net/ezdr3xdg/17/
Use CSS radial-gradient()
DEMO 1:
body {
height: 100vh;
background-color: #e7d2c9;
background-image: -webkit-radial-gradient(center top, ellipse farthest-corner, #fff 0%, #e7d2c9 50%);
}
DEMO 2:
body{
height:100vh;
background-color:#e7d2c9;
background-image: -webkit-radial-gradient(center top, ellipse farthest-corner, #fff 0%, #e7d2c9 100%);
}
DEMO 3:
body {
height: 100vh;
background-color: #e7d2c9;
position:relative;
}
body:after {
content: '';
position: absolute;
left: 50%;
top: -150px;
margin-left: -100px;
width: 200px;
height: 200px;
border-radius: 50%;
z-index:-1;
background: rgba(255, 255, 255, 0.42);
box-shadow: 0 0 40px 64px rgba(255, 255, 255, 0.42);
}
I have update your jsfiddle with a starting template of sorts. Its CSS# gradients and border-radius. http://jsfiddle.net/ezdr3xdg/7/
the button:
<div id="order_now">
<div id="triangle-right"></div>
<div id="text">
ORDER NOW
<div id="sub_order">we deliver in 24hours</div>
</div>
</div>
CSS:
The Button:
#order_now{
background: linear-gradient(#846a5f, brown);
width: 200px;
border-radius: 5px;
padding: 5px;
color: white;
font-size: 12pt;
font-weight: bold;
}
#sub_order{
font-size: 10pt;
font-style: italic;
}
#triangle-right {
width: 0;
height: 0;
border-top: 25px solid transparent;
border-left: 50px solid white;
border-bottom: 25px solid transparent;
display: inline-block;
}
#text{
display: inline-block;
}
The Background:
body{
background:linear-gradient(to right, red, blue, red);
}
this should be enough to get you started.
I am attempting to make a box that displays text when you hover over it.
this is the code I have currently:
<style>
/* WHILE HOVERED */
.one:hover {
box-shadow: 0 15px 30px black;
background: #00576f;
background: -moz-linear-gradient(top, #0c5f85, #0b5273 50%, #024869 51%, #003853);
background: -webkit-gradient(linear, left top, left bottombottom, color-stop(0, #0c5f85), color-stop(.5, #0b5273), color-stop(.51, #024869), to(#003853));
}
/* WHILE BEING CLICKED */
.one:active { }
.other {
width: 200px;
height: 200px;
line-height: 100px;
color: white;
text-decoration: none;
font-size: 50px;
font-family: helvetica, arial;
font-weight: bold;
display: block;
text-align: center;
position: relative;
margin-top: 10px auto;
/* BACKGROUND GRADIENTS */
background: #00485c;
</style>
<body>
<center><div class="other one"/div></center>
</body>
I know that there is probably a simpler way to do what I have so far, but I only need to know how to make text appear in the square when you hover over it.
thanks.
Well you can do this in pure CSS, but JavaScript may be the better option if you're unable to change the HTML markup. At any rate:
.one:hover:after {
content: "My text here!"
}
What am I doing bad?
CSS:
.submit{
padding-left:10px;
margin:0;
border:0;
outline: 0;
height:32px;
padding-right:32px;
}
.green-btn {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#61A801), to(#8CC400));
background: -webkit-linear-gradient(top, #8CC400, #61A801);
background: -moz-linear-gradient(top, #8CC400, #61A801);
background: -ms-linear-gradient(top, #8CC400, #61A801);
background: -o-linear-gradient(top, #8CC400, #61A801);
color: #fff;
font-family: verdana;
font-size: 13px;
font-weight: normal;
border-radius:5px;
}
.clipboard{
background-image: url(http://cdn1.iconfinder.com/data/icons/opensourceicons/32/Scissors.png) no-repeat right center;
}
HTML:
<input type="submit" value="Copy" class="submit green-btn clipboard">
JSFiddle: http://jsfiddle.net/77NYA/
You cannot specify the position and repeat values inside the background-image property. You can only specify the URL to the image. You'll have to separate them out like this:
.clipboard {
background-image: url(http://cdn1.iconfinder.com/data/icons/opensourceicons/32/Scissors.png);
background-repeat: no-repeat;
background-position: right center;
}
Also note: Some browsers (I don't know which ones) don't allow gradients and background images to be combined together.
Here's an alternate solution using a <button> with an <img> inside it:
<button type="submit" value="Copy" class="submit green-btn">
<img src="http://cdn1.iconfinder.com/data/icons/opensourceicons/32/Scissors.png" alt="[scissors]" />
Copy
</button>
.submit{
padding-left:10px;
margin:0;
border:0;
outline: 0;
height:32px;
line-height:32px;
padding-right:10px;
}
.green-btn {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#61A801), to(#8CC400));
background: -webkit-linear-gradient(top, #8CC400, #61A801);
background: -moz-linear-gradient(top, #8CC400, #61A801);
background: -ms-linear-gradient(top, #8CC400, #61A801);
background: -o-linear-gradient(top, #8CC400, #61A801);
color: #fff;
font-family: verdana;
font-size: 13px;
font-weight: normal;
border-radius:5px;
}
.green-btn img {
float: right;
margin-left: 10px;
}
And the jsFiddle preview. Feel free to play with the margins and stuff to make it look more how you want.
You have to use background: url(...) instead of background-image
The linear gradient will be overridden by your background-image once you fix the background-image property.
Best way to do this is to create a div and use linear-gradient on it. Create 2 child elements one which will contain text and other which will contain the icon as background. Make the div behave like a submit button using jquery.
in your .clipboard class remove -image and make it
.clipboard { background: url(http://cdn1.iconfinder.com/data/icons/opensourceicons/32/Scissors.png) no-repeat right center;
}
because 'no-repeat' is value of background-repeat and
and 'right center' is value of background-position, and you are using these values in background-image .
so syntex is background: image-src repeat-value image-position