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.
Related
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 =]
As the title describes I'm having a issue with a cursor.
What I have done is I placed a link where it can download some pdf file. All hover effects are working except the pointer. When hovering over the svg I see a cursor: pointer (this is good) but when i'm at the point where the margin right start it is back to the cursor type: default.
Removing the margin will help but then the text is straight next two the SVG and that is something I don't want.
Checked it on the following browser:
Chrome v. 54 : no problem
Firefox v. 49.01 : no problem
IE v. 11.6 : problem
Edge v. 25 : problem
Below the code for some context and the problem button. I'm doing something wrong but cannot figure it out. :)
CSS
.btn {
height: 40px;
background: white;
color: #45443d;
font-size: 14px;
border: 1px solid #cccccc;
border-radius: 3px;
padding: 8px 24px;
margin: 8px 0px 0px 8px;
}
.btn svg {
fill: #45443d;
}
.btn:hover {
color: white;
border: 1px solid transparent;
background: #f78400;
text-decoration: none;
box-shadow: 0px 0px 34px -9px rgba(0, 0, 0, 0.75);
}
.btn--pdf:hover {
color: white;
border: 1px solid transparent;
background: #16915b;
text-decoration: none;
box-shadow: 0px 0px 34px -9px rgba(0, 0, 0, 0.75);
}
.btn--pdf:hover svg {
fill: white;
}
HTML
<a class="btn btn--pdf">
<svg class="btn__icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="icons.svg#icon-pdf"></use>
</svg>
PDF
</a>
UPDATE
Forgot the icon class.
.btn__icon {
width: 20px;
height: 20px;
padding: 0;
margin: 0;
margin-right: 16px;
vertical-align: middle;
}
plunker example
I have css called action1 and i trying to remove outline property from it just for firefox browser. Here is the class
a.action1,a.action1:link,a.action1:visited {
display: block;
height: 27px;
width: 200px;
color: #FFFFFF;
background-color: #666633;
font-family: Century Gothic, sans-serif;
font-size: 13px;
text-align: center;
vertical-align:middle;
padding: 1px 2px;
border: 1px solid #FFFFFF;
outline: 1px solid #666633;
text-decoration: none;
margin: 1px;
cursor: pointer;
-moz-box-shadow: 0px 0px 6px 0px #888;
-webkit-box-shadow: 0px 0px 6px 0px #888;
box-shadow: 0px 0px 6px 0px #888;
}
and here is the code i am using in my jsp to remove the outline property
<style>
#-moz-document url-prefix() {
a.action1 {
outline: 0px;
}
}
</style>
This is not working for.
<a class="action1" onclick="dosomething()" href="gosomewhere">somename</a>
Although moz-document is working perfectly fine for input type button.
Use Firebug to check whether the css is applied, whether it has lower priority level than others.
Try
<style>
#-moz-document url-prefix() {
a.action1 {
outline: 0 none !important;
}
}
</style>