Im testing on IE Edge. This is my css code:
li.inactive{
pointer-events: none;
background: #ccc;
-webkit-filter: none;
filter:none;
opacity: 1;
cursor: not-allowed;
h1{
background: #eee;
color: #ccc;
span{
color: #ccc;
}
i{
color: #ccc;
}
}
h1:after{
border-color: transparent transparent transparent #eee;
}
}
On chrome its working but on i can hover over h1 and click on li. Any suggestion how can i fix that?
pointer-event does not work on links in IE11 and Edge unless display is set to block or inline-block. Source
A li-item is neither display:block; or display:inline-block;, unless it is specified, so to fix the issue, try this:
li.inactive{
display:block;
pointer-events: none;
background: #ccc;
-webkit-filter: none;
filter:none;
opacity: 1;
cursor: not-allowed;
h1{
background: #eee;
color: #ccc;
span{
color: #ccc;
}
i{
color: #ccc;
}
}
h1:after{
border-color: transparent transparent transparent #eee;
}
}
Simply add diplay: inline-block; to your CSS class.
Check here:
https://codepen.io/ymana/pen/yGWPWw
Related
I customize the link. I want the border-color to depend on the color. For this I use CurrentColor.
How to make border-bottom with opacity 0.5?
a {
text-decoration: none;
color: blue;
border-bottom: 1px solid CurrentColor;
}
Some link
I have one solution, but I'm not sure that it is the best.
a {
text-decoration: none;
color: blue;
background: linear-gradient(to bottom, CurrentColor, transparent 50%) 0 100% repeat-x;
background-size: 10px 1px;
}
Some link
This solution doesn’t work.
a {
--color: blue;
text-decoration: none;
color: var(blue);
border-bottom: 1px solid rgba(var(--color), 0.5);
}
Some link
With CSS variables you need to do something like this:
a {
--color: 0,0,255;
text-decoration: none;
color: rgb(var(--color));
border-bottom: 1px solid rgba(var(--color), 0.2);
}
Some link
For the gradient solution you may create two gradients. A bottom one with the currentColor and a top one with the background color (white in this case) and adjust the opacity of the top one to control the opacity of the bottom one:
a {
text-decoration: none;
color: blue;
background-image:
linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)),
linear-gradient(CurrentColor, CurrentColor);
background-position:bottom;
background-size:100% 1px;
background-repeat:no-repeat;
}
Some link
You can also use pseudo-element and opacity:
a {
text-decoration: none;
color: blue;
position:relative;
}
a:after {
content:"";
position:absolute;
bottom:0;
right:0;
left:0;
height:1px;
background:currentColor;
opacity:0.2;
}
Some link
Another idea is to use box-shadow like we did with gradient by having two layers:
a {
text-decoration: none;
color: blue;
box-shadow:
0 1px 0 0 rgba(255,255,255,0.8),
0 1px 0 0 currentColor;
}
Some link
It because you set --color: blue and it not rgb color you have to set rgb color.. the a of rgba is the opacity
a {
--color: 1,1,1;
text-decoration: none;
color: var(--color);
border-bottom: 1px solid rgba(var(--color), 0.2);
}
Some link
You can convert color to rgb here:https://www.rapidtables.com/convert/color/hex-to-rgb.html
I'm hoping someone can help. I've tried a number of fixes now and don't know what I'm doing wrong.
My site is Clintonholmes.com
The code I have for my "Want to know more?" Button on my home page is as follows.
.button1 {
background-color: white;
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
background-color: white;
color: #663366;
border: 2px solid #663366;
}
.button1:hover {
background-color: #663366;
color: white;
a.color: white;
}
For some reason, on hover, the font is grey instead of white. What am I doing wrong?
Thanks!
Clinton
It's a CSS specificity issue. https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
You can fix it any number of ways by using a selector with higher specificity. Here are a couple of ways.
Change .button1:hover to body.gppro-custom a:hover
Or you can change color: white; to color: white!important; in .button1:hover
When I visit the bootstrap examples page here: http://getbootstrap.com/javascript/#tabs
I can click on the tabs and a blue focus outline (in chrome) does not appear. This is the behaviour I want. The same interaction (clicking a tab) in my application shows the blue outline.
I know there are several easy fixes (Bootstrap's Togglable Tabs - Removing outline / focus ?) to this problem (changing the css to outline: 0 for anchors), but what I can't figure out is why the bootstrap example works (doesn't outline after clicking) and mine doesn't. When I select the tabs anchor tag in dev tools, this is the css I see applied:
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
color: #555;
cursor: default;
background-color: #fff;
border: 1px solid #ddd;
border-bottom-color: transparent;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
color: #555;
cursor: default;
background-color: #fff;
border: 1px solid #ddd;
border-bottom-color: transparent;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
color: #555;
cursor: default;
background-color: #fff;
border: 1px solid #ddd;
border-bottom-color: transparent;
}
.nav-tabs>li>a:hover {
border-color: #eee #eee #ddd;
}
.nav>li>a:focus, .nav>li>a:hover {
text-decoration: none;
background-color: #eee;
}
.nav>li>a:focus, .nav>li>a:hover {
text-decoration: none;
background-color: #eee;
}
.nav-tabs>li>a {
margin-right: 2px;
line-height: 1.42857143;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
}
.nav>li>a {
position: relative;
display: block;
padding: 10px 15px;
}
a:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
a:focus, a:hover {
color: #23527c;
text-decoration: underline;
}
a:focus, a:hover {
color: #23527c;
text-decoration: underline;
}
a:active, a:hover {
outline: 0;
}
a {
color: #337ab7;
text-decoration: none;
}
a {
background-color: transparent;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
user agent stylesheeta:-webkit-any-link {
color: -webkit-link;
text-decoration: underline;
cursor: auto;
}
user agent stylesheet:focus {
outline: -webkit-focus-ring-color auto 5px;
}
Of particular interest is that 'a:focus' specifies the outline attribute, yet I don't see the outline after clicking the tab. I've also verified that the anchor is set to focus. If I use the "Toggle Element State" feature in Chrome Dev Tools and check "focus", the blue outline appears.
The styles applied to my application's bootstrap tabs are the same, yet I see the blue outline after clicking the tab.
I ran into this same issue too. Odd how it only happens on certain browsers. I didn't have this issue with Chrome or Safari but it was happening on Firefox and IE11. This is what worked for me.
.navbar-default .navbar-nav>li>a {
outline: none;
}
I have a custom img for my dropdown option menu and i tried other browser like Internet Explorer and FireFox...
My Code:
textarea {
background: #9d9d9d;
color: #000000;
width: 90%;
padding: 5px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.styled-select {
width: 88%;
height: 30px;
overflow: hidden;
background: url('../img/down.png') no-repeat right #9d9d9d;
border: 1px solid #ccc;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
First Img is for Firefox the Second img is for Internet Explorer
For I.E:
select::-ms-expand
{
display: none;
}
For Firefox:
.select
{
-moz-appearance: none;
appearance: none;
text-overflow: '';
}
This css is causing the text to shift upwards in Firefox when rolled over but not in other browsers
#element{
height:40px;
}
#element a,img{
vertical-align:middle;
}
#element a{
font-size:16px;
color:#d1d1d1;
text-decoration:none;
}
#element:hover a{
border-bottom: #fff 1px dotted;
}
Makes sense to me. You are adding a border of 1px width. This will change the dimensions of the element. A simple solution is to have a permanent border and just change its color:
#element a {
font-size: 16px;
color: #d1d1d1;
text-decoration: none;
border-bottom-style: dotted;
border-bottom-width: 1px;
border-bottom-color: transparent;
}
#element:hover a {
border-bottom-color: #fff;
}
Add display: inline-block; and margin-bottom: -1px; to compensate for the extra pixel on the bottom on hover.
#element:hover a{
border-bottom: #fff 1px dotted;
margin-bottom: -1px;
display: inline-block;
}