Here i have some code from my website I'm making. I'm having trouble styling the links within css. I'm not sure why they won't change. Also the reason I've used class is because i have this code repeated 4 times (don't worry about why :P) Btw I've also tried putting the 'a' infront of .profileLinks that didnt work either :(
Here is the external CSS style sheet
#trends .profileLinks a:link{
color:#0000FF;
text-decoration:none;
background: transparent;
}
#trends .profileLinks a:visited {
text-decoration: none;
color: #0000FF;
background: transparent;
}
And here is the Html Code
<div id="trends">
<h1> Trends... </h1>
<img src="logo.png" alt="Profile Image" height="59" width="68">
<a class="profileLinks" href="#" title="User's Profile Name"> Mark Fonacier </a>
<a class= "commentLinks" onClick ="javascript:ShowHide('HiddenDiv')" href="javascript:;" ><i>Comment</i></a>
<br/>
<p>
PostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPost
</p>
<a onClick ="javascript:ShowHide('HiddenDiv')" href="javascript:;" ><i>Comment</i></a>
<div class="mid" id="HiddenDiv" style="DISPLAY: none" >
<form method="post" action="">
<textarea name="comments" cols="60" rows="2" placeholder="Enter your comments here..." maxlength="1000">
</textarea>
<input type="submit" value="Submit" />
</form>
</div>
<br/>
This selector,
#trends .profileLinks a:link
will only work for child <a> tags of elements with a class of profileLinks, whereas your <a> are the elements with the class applied to it. Change it like so:
#trends a.profileLinks:link
Same goes for the other rule.
Do you have any other stylesheet overridden to yours?
Try this
#trends .profileLinks a:link {
color:#0000FF !important;
text-decoration:none;
background: transparent;
}
Hey try this one Just defined color to all links. Change the link color to your desire one.
Related
I have been trying a couple of methods here to make my font-awesome icon colored white as I focus on my input... but nothing seems to work.
My code looks like this:
HTML
<div id="container">
<form id="form">
<input type="password" placeholder="Code" required id="input">
<div class="icon"><i class="fas fa-user-secret"></i></div>
<hr>
<br>
<center>
<button id="submit" type="submit">Submit</button>
</center>
</form>
</div>
I've tried doing:
input:focus + .fas-fa-user-secret {
color: #fff;
}
input:focus + .fas {
color: #fff;
}
input:focus + .i {
color: #fff;
}
But none of the above CSS code works. Not even the text in the input is white, but whenever I remove the + and the rest it does work for input.
Any help on this is appreciated, looked at every thread about making icons a different color when focusing on input.
Thanks.
You need to use input:focus+.icon since you have your icon inside the .icon div.
input:focus+.icon {
color: #ff0000;
}
input:focus {
color: red;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div id="container">
<form id="form">
<input type="password" placeholder="Code" required id="input">
<div class="icon"><i class="fas fa-user-secret"></i></div>
<hr>
<br>
<center>
<button id="submit" type="submit">Submit</button>
</center>
</form>
</div>
The problem is that you are using general sibling combinator, which select its siblings right after it, which is a <div>, not the icon.
input:focus + .fas-fa-user-secret {
color: #fff;
}
What you may want to do is set color: inherit to the icon, and then set desiring color for the div via this CSS selector and it will be fine
input:focus + div {
//your style
}
I want to display an html with an input type=image.
I use a base64 svg string for the image.
When setting the src within the input attribute src - it works fine (btn1).
When setting the src via external css and setting image class, it doesn't work.
I Tried 2 different options btn2,bt3.
<html>
<style>
.img2 {
src: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItcmVmcmVzaC1jY3ciPjxwb2x5bGluZSBwb2ludHM9IjEgNCAxIDEwIDcgMTAiPjwvcG9seWxpbmU+PHBvbHlsaW5lIHBvaW50cz0iMjMgMjAgMjMgMTQgMTcgMTQiPjwvcG9seWxpbmU+PHBhdGggZD0iTTIwLjQ5IDlBOSA5IDAgMCAwIDUuNjQgNS42NEwxIDEwbTIyIDRsLTQuNjQgNC4zNkE5IDkgMCAwIDEgMy41MSAxNSI+PC9wYXRoPjwvc3ZnPg==";
}
.img3 {
src: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItcmVmcmVzaC1jY3ciPjxwb2x5bGluZSBwb2ludHM9IjEgNCAxIDEwIDcgMTAiPjwvcG9seWxpbmU+PHBvbHlsaW5lIHBvaW50cz0iMjMgMjAgMjMgMTQgMTcgMTQiPjwvcG9seWxpbmU+PHBhdGggZD0iTTIwLjQ5IDlBOSA5IDAgMCAwIDUuNjQgNS42NEwxIDEwbTIyIDRsLTQuNjQgNC4zNkE5IDkgMCAwIDEgMy41MSAxNSI+PC9wYXRoPjwvc3ZnPg==");
}
</style>
<body>
<input id="imgBtn1" type="image" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItcmVmcmVzaC1jY3ciPjxwb2x5bGluZSBwb2ludHM9IjEgNCAxIDEwIDcgMTAiPjwvcG9seWxpbmU+PHBvbHlsaW5lIHBvaW50cz0iMjMgMjAgMjMgMTQgMTcgMTQiPjwvcG9seWxpbmU+PHBhdGggZD0iTTIwLjQ5IDlBOSA5IDAgMCAwIDUuNjQgNS42NEwxIDEwbTIyIDRsLTQuNjQgNC4zNkE5IDkgMCAwIDEgMy41MSAxNSI+PC9wYXRoPjwvc3ZnPg==" alt="Opss">
<label for="imgBtn1">btn1 - att src</label>
<br>
<input id="imgBtn2" type="image" class="img2" alt="Opss">
<label for="imgBtn2">btn2 - by css class</label>
<br>
<input id="imgBtn3" type="image" class="img3" alt="Opss">
<label for="imgBtn3">btn3 - by css class</label>
</body>
</html>
Please advise.
The <img> src attribute is not a property that you can style with CSS.
If you really need to style the button with CSS, you could do it this way:
It involves using a pseudo-element to cover up the contents of the <input> and setting its background to the SVG image.
It's a bit hacky, as it requires that you know in advance what the background colour behind the imput element is. And it'll almost certainly need to be a solid colour.
#imgBtn2, #imgBtn3
{
position: relative;
width: 24px;
height: 24px;
color: transparent; /* hide alt text */
}
#imgBtn2::before, #imgBtn3::before
{
content: '';
display: block;
width: 24px;
height: 24px;
position: absolute;
background-color: white;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItcmVmcmVzaC1jY3ciPjxwb2x5bGluZSBwb2ludHM9IjEgNCAxIDEwIDcgMTAiPjwvcG9seWxpbmU+PHBvbHlsaW5lIHBvaW50cz0iMjMgMjAgMjMgMTQgMTcgMTQiPjwvcG9seWxpbmU+PHBhdGggZD0iTTIwLjQ5IDlBOSA5IDAgMCAwIDUuNjQgNS42NEwxIDEwbTIyIDRsLTQuNjQgNC4zNkE5IDkgMCAwIDEgMy41MSAxNSI+PC9wYXRoPjwvc3ZnPg==");
}
<input id="imgBtn1" type="image" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItcmVmcmVzaC1jY3ciPjxwb2x5bGluZSBwb2ludHM9IjEgNCAxIDEwIDcgMTAiPjwvcG9seWxpbmU+PHBvbHlsaW5lIHBvaW50cz0iMjMgMjAgMjMgMTQgMTcgMTQiPjwvcG9seWxpbmU+PHBhdGggZD0iTTIwLjQ5IDlBOSA5IDAgMCAwIDUuNjQgNS42NEwxIDEwbTIyIDRsLTQuNjQgNC4zNkE5IDkgMCAwIDEgMy41MSAxNSI+PC9wYXRoPjwvc3ZnPg==" alt="Opss">
<label for="imgBtn1">btn1 - att src</label>
<br>
<input id="imgBtn2" type="image" class="img2" alt="Opss">
<label for="imgBtn2">btn2 - by css class</label>
<br>
<input id="imgBtn3" type="image" class="img3" alt="Opss">
<label for="imgBtn3">btn3 - by css class</label>
Update
If you don't need an <input type="image/> then I would suggest just using a <button> element. Then you can just style the background.
Here we separate out the button styling from the CSS class for the button icon. So if you have buttons of the same type with different icons, you can reuse class imgButton and just give it a different icon class.
.imgBtn
{
border: none;
width: 24px;
height: 24px;
background-color: transparent;
}
.reload
{
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItcmVmcmVzaC1jY3ciPjxwb2x5bGluZSBwb2ludHM9IjEgNCAxIDEwIDcgMTAiPjwvcG9seWxpbmU+PHBvbHlsaW5lIHBvaW50cz0iMjMgMjAgMjMgMTQgMTcgMTQiPjwvcG9seWxpbmU+PHBhdGggZD0iTTIwLjQ5IDlBOSA5IDAgMCAwIDUuNjQgNS42NEwxIDEwbTIyIDRsLTQuNjQgNC4zNkE5IDkgMCAwIDEgMy41MSAxNSI+PC9wYXRoPjwvc3ZnPg==");
}
<button type="button" class="imgBtn reload"/>
Since CSS is not a must, then javascript is here to do the job.
example , setting your dataUri inside an array and and a loop on your inputs to update the src attribute:
// set an array with each of your dataUris
const img =new Array ('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItcmVmcmVzaC1jY3ciPjxwb2x5bGluZSBwb2ludHM9IjEgNCAxIDEwIDcgMTAiPjwvcG9seWxpbmU+PHBvbHlsaW5lIHBvaW50cz0iMjMgMjAgMjMgMTQgMTcgMTQiPjwvcG9seWxpbmU+PHBhdGggZD0iTTIwLjQ5IDlBOSA5IDAgMCAwIDUuNjQgNS42NEwxIDEwbTIyIDRsLTQuNjQgNC4zNkE5IDkgMCAwIDEgMy41MSAxNSI+PC9wYXRoPjwvc3ZnPg==' ,
' data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItcmVmcmVzaC1jY3ciPjxwb2x5bGluZSBwb2ludHM9IjEgNCAxIDEwIDcgMTAiPjwvcG9seWxpbmU+PHBvbHlsaW5lIHBvaW50cz0iMjMgMjAgMjMgMTQgMTcgMTQiPjwvcG9seWxpbmU+PHBhdGggZD0iTTIwLjQ5IDlBOSA5IDAgMCAwIDUuNjQgNS42NEwxIDEwbTIyIDRsLTQuNjQgNC4zNkE5IDkgMCAwIDEgMy41MSAxNSI+PC9wYXRoPjwvc3ZnPg==',
'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItcmVmcmVzaC1jY3ciPjxwb2x5bGluZSBwb2ludHM9IjEgNCAxIDEwIDcgMTAiPjwvcG9seWxpbmU+PHBvbHlsaW5lIHBvaW50cz0iMjMgMjAgMjMgMTQgMTcgMTQiPjwvcG9seWxpbmU+PHBhdGggZD0iTTIwLjQ5IDlBOSA5IDAgMCAwIDUuNjQgNS42NEwxIDEwbTIyIDRsLTQuNjQgNC4zNkE5IDkgMCAwIDEgMy41MSAxNSI+PC9wYXRoPjwvc3ZnPg==');
// reset src attributes from dataUri stored in img()
let myIpts =document.querySelectorAll('input[id^="imgBtn"]');
for (i = 0; i < myIpts.length; i++) {
myIpts[i].setAttribute('src', img[i] );
}
<html>
<style>
</style>
<body>
<input id="imgBtn1" type="image" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItcmVmcmVzaC1jY3ciPjxwb2x5bGluZSBwb2ludHM9IjEgNCAxIDEwIDcgMTAiPjwvcG9seWxpbmU+PHBvbHlsaW5lIHBvaW50cz0iMjMgMjAgMjMgMTQgMTcgMTQiPjwvcG9seWxpbmU+PHBhdGggZD0iTTIwLjQ5IDlBOSA5IDAgMCAwIDUuNjQgNS42NEwxIDEwbTIyIDRsLTQuNjQgNC4zNkE5IDkgMCAwIDEgMy41MSAxNSI+PC9wYXRoPjwvc3ZnPg=="
alt="Opss">
<label for="imgBtn1">btn1 - att src</label>
<br>
<input id="imgBtn2" type="image" class="img2" alt="Opss">
<label for=" imgBtn2 ">btn2 - by css class</label>
<br>
<input id="imgBtn3" type="image" class="img3" alt="Opss">
<label for="imgBtn3 ">btn3 - by css class</label>
</body>
</html>
This is my code:
HTML:
<a href="index2.html">
<input type="image" class="button" value="">
</a>
CSS:
.button {
background:url(example.jpg) no-repeat;
cursor:-webkit-grab;
border: none;
}
What should happen is that it display an image and when I click on, it will navigate to another this site index2.html. It worked with another image but it had an annoying border but after I changed the image it doesn't work any more.
You do not need an input type button, simply use img...
html:
<a href="index2.html">
<img src="example.jpg" />
</a>
css:
a img {
border: none;
cursor: grab;
}
Hey all I am hoping you guys can help me? I am trying to edit this and need to be able to add a url when someone clicks the button. Also the ability to download a file. What would I add for this?
<div class="optin" data-lb="editable-optional">
<div class="shadow"></div>
<img src="img/books-small.png" class="minor-image" />
<p>Enter your email to download the guide</p>
<div>
<input id="header-button" type="submit" value="Free Instant Access »" onclick="javascript:return false"/>
Just use the download tag. You can add the image inside the a tag.
<div class="optin" data-lb="editable-optional">
<div class="shadow"></div>
<a href="img/books-small.png" download><img class="minor-
image"/></a>
<p>Enter your email to download the guide</p>
<div>
<input id="header-button" type="submit" value="Free Instant Access »" onclick="javascript:return false"/>
Using <div> s is not recommended by W3C standards.
Why don’ t you just use the hyperlink <a> tag:
Free Instant Access »
You can use CSS styles to make the hyperlink <a> look like a buttom
(taken from W3Schools):
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
So after some digging I am not sure what the issue is here. I have a text field that is overlaid with a div. The div contains a ul with multiple li representing currently applied filters to a table. The overlay is supposed to catch the clicks to open a menu and hold any new filters.
EDIT:
To clarify the need is for IE9 specifically. For some reason the overlay is not what comes to the foreground. I can click on specifically the li and get the behavior I am expecting but there are space between and at the end that the overlay appears not to be present.
--My code--
HTML:
<!-- Start filter row-->
<div class="row collapse">
<div class="small-3 medium-2 large-1 columns">
<span class="prefix">Current Filters:</span>
</div>
<div class="small-9 medium-10 large-11 columns">
<div id="manager_filter_overlay" class="filter_overlay">
<ul>
<li class="filter_item">Status: Active</li>
<li class="filter_item">Start Date: 07/MAR/2014</li>
<li class="filter_item">End Date: 07/APR/2014</li>
</ul>
</div>
<input type="text" onkeydown="return false;" style="z-index:0;">
</div>
<div class="filter-menu">
<div class="arrow-up"></div>
<div class="filter-menu-container">
<ul>
<li>
<label>Status:
<select>
<option>
Active
</option>
<option>
Deleted
</option>
</select>
</label>
</li>
<li>
<label>Start Date:
<input type="text" placeholder="DD/MMM/YYY">
</label>
</li>
<li>
<label>End Date:
<input type="text" placeholder="DD/MMM/YYY">
</label>
</li>
</ul>
<div class="row">
<div class="large-12 center columns">
<input type="button" class="button tiny blue" value="Search">
<input type="button" class="button tiny blue" value="Reset">
<input type="button" class="button tiny blue" value="Save">
</div>
</div>
</div>
</div>
</div>
<!-- End filter row-->
CSS:
.filter_overlay{
position:absolute;
height:37px;
width:100%;
/*border:1px solid black;*/
}
.filter_overlay:hover{
cursor:pointer;
}
.filter_overlay ul{
margin:0;
list-style: none;
margin-left:5px;
}
.filter_overlay ul li{
display:inline-block;
/*border: 1px solid blue;*/
margin-top:10px;
padding-right:5px;
font-size:12px;
}
All browsers except IE9 seem to be doing what I would expect. When hovering over the text box anywhere my cursor is a pointer I click and my drop down show (JS not included it is very basic and not anything I think is impacting the issue). In IE9 however when hovering only a pointer is shown when over an li and when outside of that it is able to get to the text field.
Not sure what exactly you're talking about, but I moight, lol.
Anyway, if you want the default cursor everywhere, try this:
*:hover {
cursor: default;
}
or if just over the bullet points, try:
li:hover {
cursor: default;
}
Hope this works :D
After some further looking into this appears to be related to the background. Without it based on the two threads below there are z-index issues. While they suggest using
background:white; filter:alpha(opacity=1);
I was not able to see an results from this.
All I did was added the background and a 1px border.
IE z-index trouble on element with transparent background
z-index problem in IE with transparent div