btw this is my first post :)
im trying to edit the code but i get this error:
/* -----------------------
# SWEETALERT CUSTOMIZED
------------------------*/
.swal-modal {
background-color: rgba(0, 0, 0, 0.651);
color: #fff;
}
.swal-title {
color:#fff;
font-size: 20px;
}
.swal-text {
color: #fff;
font-size: 15px;
}
/* button */
.swal-button {
padding: 7px 19px;
border-radius: 5px;
background-color: #198754;
font-size: 12px;
border: 1px solid #198754;
}
.swal-button:focus {
box-shadow: none;
}
.swal-button:not([disabled]):hover{
background: transparent;
color: #fff;
border: 1px solid #198754;
}
/* Icons */
.swal-icon--success_hide-corners {
background: none !important;
}
.swal-icon--success:before,
.swal-icon--success:after {
background: none !important;
}
the problem is the white line
I want to get rid of this white line i think this is in the ".swal-icon--success_hide-corners" part but i couldnt fint the solution.
i found my solution, I wrote one "_" instead of two "__"
in the line:
.swal-icon--success_hide-corners {
Related
I've an issue with the rendering of an input with placeholder when it's rendered by firefox.
I've made styles to have a text color different when placeholder or a value. then when it's disabled i wanted to have the same text color for both. It works perfectly in chrome but not in firefox.
there is my css :
input[type=text] {
display: inline-block;
margin: 0 0 5px;
padding: 2px 7px 0;
height: 24px;
min-width: 140px;
width: 0;
font-size: 14px;
font-weight: 100;
letter-spacing: .07rem;
color: var(--inpt-text-primary-normal);
background: var(--inpt-bckg-primary-normal);
border: none;
border-radius: 5px;
box-shadow: 0 2px 2px rgba(0,0,0,.15);
}
input[type=text]::placeholder { color: var(--inpt-text-primary-placeholder); }
input[type=text]:hover {
color: var(--inpt-text-primary-hover);
background: var(--inpt-bckg-primary-hover);
box-shadow: 0 3px 7px rgba(0,0,0,.5);
}
input[type=text]:focus {
color: var(--inpt-text-primary-focus);
background: var(--inpt-bckg-primary-focus);
}
input[type=text]:disabled {
color: var(--inpt-text-primary-disabled);
background: var(--inpt-bckg-primary-disabled);
box-shadow: none;
}
input[type=text]:disabled::placeholder { color: var(--inpt-text-primary-disabled); }
input[type=text]:disabled::-moz-placeholder { color: var(--inpt-text-primary-disabled); }
The render in chrome
The render in Firefox
When i'm trying to change colors, it's like firefox apply the transparency two times on text color of the input with value.
I really doubt what I am asking is possible but it's still worth a try.
I am trying to create a button that normally has background-color: transparent; color: white; and when you hover over it, those properties should swap. The problem is that if you just swap them then all you see is a white button. If you know the background colour of the containing element then you can get the colour from there but If the button is over an image or a canvas then this won't work.
This is how I've been doing it so far
html,
body {
height: 100%;
}
#container {
background-color: #38404D;
height: 100%;
}
.ghost-button {
background-color: transparent;
border: 1px solid #ffffff;
outline: none !important;
transition: all 0.8s;
margin: 10px 10px;
padding: 6px 7px;
cursor: pointer;
color: #ffffff;
}
.ghost-button:hover {
background-color: #ffffff;
color: #38404D;
}
.ghost-button:active {
box-shadow: inset 0 0 8px 0px #888888;
}
<div id="container">
<button class="ghost-button">Hover Here</button>
</div>
UPDATE
It seems that quite a few people were confused by the question. I am asking if there is a way to do the exact same thing I've done above but on top of an image or a canvas (instead of a solid colour). See example below
html,
body {
height: 100%;
}
#container {
background-image: url("http://www.freegreatpicture.com/files/147/17878-hd-color-background-wallpaper.jpg");
height: 100%;
}
.ghost-button {
background-color: transparent;
border: 1px solid #ffffff;
outline: none !important;
transition: all 0.8s;
margin: 10px 10px;
padding: 6px 7px;
cursor: pointer;
color: #ffffff;
}
.ghost-button:hover {
background-color: #ffffff;
color: #38404D;
}
.ghost-button:active {
box-shadow: inset 0 0 8px 0px #888888;
}
<div id="container">
<button class="ghost-button">Hover Here</button>
</div>
Yes, it IS possible in CSS with mix-blend-mode.
Answer's update in April 2021: Currently it have a very solid support (95% globally) although Safari doesn't have hue, saturation, color, and luminosity blend modes. Of course, IE isn't a considerable thing if you expect to use it (like many of other cool CSS features of the last years).
.ghost-button {
/* Important part */
mix-blend-mode: screen;
background: #000;
color: #fff;
/* Button cosmetics */
border: .125em solid #fff;
font: 2em/1 Cursive;
letter-spacing: 1px;
outline: none !important;
transition: all .8s;
padding: .5em 1em;
cursor: pointer;
}
.ghost-button:hover {
/* Important part */
background: #fff;
color: #000;
}
#container {
background: url('http://www.freegreatpicture.com/files/147/17878-hd-color-background-wallpaper.jpg') center/cover;
/* Also works with background-color or gradients: */
/* background: linear-gradient(to right, red, yellow); */
/* Container positioning */
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
html, body {
margin: 0;
}
<div id="container">
<button class="ghost-button">Hover Here</button>
</div>
As you can see, the secret here is using mix-blend-mode: screen along with the black color for the "erased" part, since black is mixed with the background when using this screen mode.
No, it isn't possible in CSS! You could try to set the color with JS to mimic this effect.
body {
height: 100%;
}
#container {
background-color: #38404D;
height: 100%;
}
.ghost-button {
background-color: transparent;
border: 1px solid #ffffff;
outline: none !important;
transition: all 0.8s;
margin: 10px 10px;
padding: 6px 7px;
cursor: pointer;
color: #ffffff;
}
.ghost-button:hover {
background-color: none;
color: red;
}
.ghost-button:active {
box-shadow: inset 0 0 8px 0px #888888;
}
<div id="container">
<button class="ghost-button">Hover Here</button>
</div>
hover color is set to red you can update it.
Below is my code. I'm going for a text changing effect when I hover onto a search button. I'm keeping the button background the same and just trying to change the color of the text when hovering. I'm not sure what i'm missing. Is there an easier way to achieve this? The button just stays the pre-hover colors. I'm out of ideas.
.header_search #search-submit {
width: 80px;
height: 35px;
margin: 0 -83px 0 0;
background: #ff9105;
border: 2px solid black;
border-left: none;
font-size: 14px;
color: #008b95;
-webkit-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
}
{{ trans_fast }}
.header_search #search-submit:hover {
background: #ff9105;
color: white
}
.header_search #search-submit {
width: 80px;
height: 35px;
margin: 0 -83px 0 0;
background: #ff9105;
border: 2px solid black;
border-left: none;
font-size: 14px;
color: #008b95;
-webkit-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
}
/* dont know about this "{{ trans_fast }}" */
.header_search #search-submit:hover {
background: #ff9105;
color: white;
}
After editing here, it should look okay, the trans_fast is a very unknown concept to me. Some of your css properties were vertical and some were horizontal. Try one or the other but not both at the same time for syntax purposes. PLUS (you forgot the semicolon for color)
Add ; and the end of color: white
.header_search #search-submit:hover {
background: #ff9105;
color: white;
}
href won't work in Chrome but it works on Microsoft Internet Explorer or Edge.
Looks like the line (a href="....html")Something(/a) is not working on edge or safari.
It is like dropdown menu.
There is a lot of code. You can check this problem here: http://www.kuhnibelarusi.lv . You will see 4 blue lines. Click on one of them and there will be the dropdown menu.
.dropdown {
position: relative;
border-radius: 0px;
}
.dropdown-menu {
top: 100%;
left: 0;
z-index: 1000;
float: inherit;
padding: 5px 0;
margin: 4px 0 0;
font-size: 14px;
text-align: left;
list-style: none;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 0px solid #ccc;
border: 0px solid rgba(0, 0, 0, .15);
border-radius: 0px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
}
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
color: #262626;
text-decoration: none;
background-color: #f5f5f5;
}
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px dashed;
border-top: 4px solid \9;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
<li class="dropdown" style="list-style-type: none; padding: 5px; background-color: #3a4d5d; margin: 2px">Pakalpojumi <span class="caret"></span>
<ul class="dropdown-menu">
<li>Interjera dizains</li>
<li>Virtuves projektēšana</li>
</ul>
</li>
You are relying on default browser styles. As you have noticed, they are not reliable.
You also seem to be assuming href contains instructions how to style the elements - this is incorrect. href only defines the target url of the link.
If you want it to look in a specific way (turn blue, as you said), you have to use own css rules:
a,
a:link {
color: black;
}
a:hover {
color: blue;
}
a:visited {
color: red;
]
Strictly spoken, you only need the second part to make the link turn blue on hover, but if you don't define how it has to look before, you can again get different results in different browsers.
You need to tell Chrome and other browsers that you want a hover state for your 'a' tags, use CSS to do this...
.dropdown-menu li a {
color: red;
}
.dropdown-menu li a:hover {
color: blue;
}
you can also style :active and :visited
Try it out =]
I have been created simple search form, using by google.
Here is my jsfiddle link: http://jsfiddle.net/njs6d489/
In that, search icon right side right?
But i need icon looking left side and placeholder also need to place left side.
I explained in this image http://s22.postimg.org/ype712rcx/Untitled_1.png
May i know, how can i do this. Is there possible to do this?
Thanks in advance.
body {
background: #fff;
color: #666;
font: 90%/180% Arial, Helvetica, sans-serif;
width: 800px;
max-width: 96%;
margin: 0 auto;
}
a {
color: #69C;
text-decoration: none;
}
a:hover {
color: #F60;
}
input {
outline: none;
}
input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
display: none;
}
input[type=search] {
background: #ededed url(http://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center;
border: solid 1px #ccc;
padding: 9px 10px 9px 32px;
width: 55px;
-webkit-border-radius: 10em;
-moz-border-radius: 10em;
border-radius: 10em;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
input[type=search]:focus {
width: 130px;
background-color: #fff;
border-color: #66CC75;
-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
box-shadow: 0 0 5px rgba(109,207,246,.5);
}
input:-moz-placeholder {
color: #999;
}
input::-webkit-input-placeholder {
color: #999;
}
/* Demo 2 */
#demo-2 input[type=search] {
width: 15px;
padding-left: 10px;
color: transparent;
cursor: pointer;
}
#demo-2 input[type=search]:hover {
background-color: #fff;
}
#demo-2 input[type=search]:focus {
width: 130px;
padding-left: 32px;
color: #000;
background-color: #fff;
cursor: auto;
}
#demo-2 input:-moz-placeholder {
color: transparent;
}
#demo-2 input::-webkit-input-placeholder {
color: transparent;
}
Are you expecting like this: Demo
Updated Demo
I changed the search icon's background position at Normal state as 50% and on focus as 90%.
Here I included only the css which I changed.
CSS:
input[type=search] {
background: #ededed url(http://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 50% center;
float:right;
}
input[type=search]:focus {
background: #ededed url(http://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 90% center;
}