Using only CSS, I'm trying to set a list of links to have a exclamation mark next to them if they are 'unvisited' links, and a check box next to them if they have been visited. The former works fine, but when the links have been visited, the tick box doesn't appear. My CSS is as follows:
.journey-table td a:link:before {
content: "\f071";
font-family: FontAwesome;
padding-right: 5px;
}
.journey-table td a:visited:before {
content: "\f14a";
font-family: FontAwesome;
padding-right: 5px;
}
Any help would be greatly appreciated.
According to this page, the styling of a :visited element, has been made very limited, for privacy reasons. Because of this, any child elements or pseudo elements of a visited link will be styled like an unvisited link.
I've created an example for you to understand
a:before {
background-color: blue;
content: "";
display: block;
height: 25px;
width: 25px;
float: left;
margin-right: 10px;
}
a:hover:before {
background-color: red;
}
this is a link
Related
How do i remove the blue background when active on an option and hovering on an option with my select dropdown.
Here is a screenshot of what i mean:
I have tried every css rule i could thin off and even search the internet, including here but nothing is working
.language {
float: right;
margin-top: -45px;
padding-right: 25px;
}
.language select {
width: 180px;
border: none;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
cursor: pointer;
}
.language select::-ms-expand {
display: none;
}
.language option {
background-color: #000;
color: #fff;
}
.language option:hover {
background-color: #000;
color: #fff;
}
.language-selector::before {
font-family: "Font Awesome 5 Free";
content: "\f0ac";
visibility: visible;
font-weight: 900;
position: relative;
float: left;
margin-left: 1690px;
margin-top: -53px;
}
<div class="language">
<select>
<option value="">English</option>
<option value="">Deutsch</option>
</select>
</div>
Well, you can't. This is set by the OS. Sorry :/
Try this
:focus {outline:0 !important;}
and this
:hover {outline:0 !important;}
If this is not working try on ur own css style !importent this will overwrite all the normall css
Good luck :)
Usually you'd use background: transparent but you have to tell us the rule that's setting the blue color or if it's the OS/browser as someone else mentioned, tell us which OS/browser. Dropdown attributes can't always be styled as many are set by the browser (see the diff between them in Firefox and Chrome). The solution for complete style control is unfortunately to create your own dropdowns using a trigger and list of items you toggle visibility and handle the user's selection.
hi It's happend for me and this is mt solution {background: transparent !important;}
I've got a CSS element set up to insert some content, via:
.foo:after {
content: "Bold, italics";
}
I'd like the word "Bold" to be rendered in a bold font-weight and the word "italics" to be rendered in an italics font-style. I know it's possible to add lines:
font-weight: bold;
font-style: italics;
But this will make both words bold and italics. If I could use html elements inside the content field I would put something like:
content: "<strong>Bold</strong>, <em>italics</em>"
But alas that's not possible.
Is there another way to achieve this effect? Ideally without invoking javascript and purely using html/css.
It's mentioned above, but unless you add a :before and :after not too sure how it can be accomplished without JS..
.foo {
float: left;
}
.foo:after {
content: "Bold, ";
font-weight: bold;
float: right;
margin-left: .5em;
display: block;
}
.foo:before {
content: 'Italic';
font-style: italic;
float: right;
margin-left: .5em;
display: block;
}
It also contains floats everywhere, but, hey! it works:)
Check it here: http://codepen.io/achoukah/pen/gpBopd
EDIT:
Heres the same, but with flex-box:
.foo {
width: 100%;
clear: both;
display: flex;
}
.foo:before {
content: "Bold, ";
font-weight: bold;
margin-left: .5em;
order: 1;
}
.foo:after {
content: 'Italic';
font-style: italic;
margin-left: .5em;
order: 2;
}
You do have other pseudo elements than 'after'/'before', like first-line or first-letter, which, with some imagination, maybe you could use on your particularly case:
w3schools Pseudo-elements
But 'inside' those first 2 I think you can not do nothing more, like #s0rfi949 pointed out.
Is there a way to display a line next to a header using CSS? Here's an image of what I'm talking about:
I could do it with a static background image, but that'd require custom CSS for every heading. And I could do some hacky stuff using :after and background colors on the h1, but it wouldn't look right against a gradient background.
I'd like to do this with CSS, not JavaScript. If it doesn't work in older browsers, that's fine.
UPDATE:
In the past I've done something like this:
<h1><span>Example Text</span></h1>
h1 {background-image:url("line.png");}
h1 span {background-color:#FFF;dislpay:inline-block;padding-right:10px}
While that works, it's hacky, and it doesn't work well with gradient backgrounds, because the span has to have a solid background color.
What I'm really looking for is something like this:
<h1>Example Text</h1>
h1 {background-image:url("line.png");} /* but don't appear under the example text */
I misspoke about the :after thing in the original post, I was thinking of another issue I had in the past.
You could do something like the following:
HTML
<div class="border">
<h1>Hello</h1>
</div>
CSS
h1 {
position: relative;
bottom: -17px;
background: #fff;
padding-right: 10px;
margin: 0;
display: inline-block;
}
div.border {
border-bottom: 1px solid #000;
}
Here is the JsFiddle to the above code.
After doing some more research, I think I found the best solution:
h2 {
color: #F37A1F;
display: block;
font-family: "Montserrat", sans-serif;
font-size: 24px;
font-weight: bold;
line-height: 25px;
margin: 0;
text-transform: uppercase;
}
h2:after {
background: url("../images/h2.png") repeat-x center;
content: " ";
display: table-cell;
width: 100%;
}
h2 > span {
display: table-cell;
padding: 0 9px 0 0;
white-space: nowrap;
}
Modified from: How can I make a fieldset legend-style "background line" on heading text?
It still requires some extra markup, unfortunately, but it's the most minimal that I've found. I'll probably just write some jQuery to add the span automatically to the h2s.
Here is one way of doing it.
Start with the following HTML:
<h1>News<hr class="hline"></h1>
and apply the following CSS:
h1 {
background-color: tan;
display: table;
width: 100%;
}
.hline {
display: table-cell;
width: 100%;
padding-left: 20px;
padding-right: 20px;
border: none;
}
.hline:after {
content: '';
border-top: 1px solid blue;
width: 100%;
display: inline-block;
vertical-align: middle;
}
See demo at: http://jsfiddle.net/audetwebdesign/Dsa9R/
You can repurpose the hr element to add the line after the text.
The advantage here is that you don't have to wrap the text with some other element.
Note: You can rewrite the CSS selectors and avoid declaring a class name and save a bit of typing.
I've been playing around with this, and I thought it would be pretty simple. What I'm trying to do is hover over the 'NEW' label. Once in its hover state, change the content from 'NEW' to 'ADD' using only CSS.
body{
font-family: Arial, Helvetica, sans-serif;
}
.item{
width: 30px;
}
a{
text-decoration:none;
}
.label {
padding: 1px 3px 2px;
font-size: 9.75px;
font-weight: bold;
color: #ffffff;
text-transform: uppercase;
white-space: nowrap;
background-color: #bfbfbf;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-decoration: none;
}
.label.success {
background-color: #46a546;
}
.item a p.new-label span{
position: relative;
content: 'NEW'
}
.item:hover a p.new-label span{
display: none;
}
.item:hover a p.new-label{
content: 'ADD';
}
<div class="item">
<a href="">
<p class="label success new-label"><span class="align">New</span></p>
</a>
</div>
Here's a JSFiddle to show you what I'm working with.
The CSS content property along with ::after and ::before pseudo-elements have been introduced for this.
.item:hover a p.new-label:after{
content: 'ADD';
}
JSFiddle Demo
This exact example is present on mozilla developers page:
::after
As you can see it even allows you to create tooltips! :) Also, instead of embedding the actual text in your CSS, you may use content: attr(data-descr);, and store it in data-descr="ADD" attribute of your HTML tag (which is nice because you can e.g translate it)
CSS content can only be usef with :after and :before pseudo-elements, so you can try to proceed with something like this:
.item a p.new-label span:after{
position: relative;
content: 'NEW'
}
.item:hover a p.new-label span:after {
content: 'ADD';
}
The CSS :after pseudo-element matches a virtual last child of the
selected element. Typically used to add cosmetic content to an
element, by using the content CSS property. This element is inline by
default.
.label:after{
content:'ADD';
}
.label:hover:after{
content:'NEW';
}
<span class="label"></span>
This little and simple trick I just learnt may help someone trying to avoid :before or :after pseudo elements altogether (for whatever reason) in changing text on hover. You can add both texts in the HTML, but vary the CSS 'display' property based on hover. Assuming the second text 'Add' has a class named 'add-label'; here is a little modification:
span.add-label{
display:none;
}
.item:hover span.align{
display:none;
}
.item:hover span.add-label{
display:block;
}
Here is a demonstration on codepen: https://codepen.io/ifekt/pen/zBaEVJ
I have a newsfeed which is obviously organized by an . When the user hovers over each of the items, the background is highlighted. I'd also like to have a small "x" in the top right hand corner of each item, only shown when hovered. This "x" would be a delete button to remove that post.
Right now I just have some basic html stating: <div class="hide-button">x</div>
I know that I don't want the "x" displayed in the html, but rather have it in the CSS. So I have the <li> css below for hovering, as well as the CSS for the hide button. I'd like to know the best method to integrate the hide button div into the <li>
.hide-button {
float: right;
margin-top: -13px;
font-size: 11px;
font-family: helvetica;
color: gray;
}
.hide-button a{
text-decoration: none;
color:gray;
}
.hide-button a:hover {
text-decoration: underline;
color:gray;
}
and the list:
.newsfeedlist li {
background: white;
border-bottom: 1px solid #E4E4E4;
padding: 12px 0px 12px 0px;
overflow: hidden;
}
.newsfeedlist li:hover {
background-color: #F3F3F3;
}
Thank you so much!!!!!
Presuming your delete buttons are inside another container you could do something like
.hide-button {
float: right;
margin-top: -13px;
font-size: 11px;
font-family: helvetica;
color: tray;
display: none;
}
... the other bits of CSS ...
.newsfeedlist li:hover .hide-button {
display: block;
}
Modifying the close button to be hidden by default and then when hovering on a list item you set the display back again on the close button.
Hope this makes sense
Tim
You might really be in need of this:
Demo at jsFiddle.net
I modified an example and tushed it up for multiple content areas or images.
But hide-button element in the li and do
.newsfeedlist li:hover .hide-button {
display: inline-block;
}
and add display: none; to .hide-button
Otherwise, there's always javascript.