I am wondering how to properly use CSS in order to display an image based on valid form feedback?
Essentially I want to display a custom green check mark image or red X image on each form input line based on valid/invalid data, respectively. Is there a way to have this image appear inside the input box, right-aligned?
Thank you!
Update: Adding the image was as simple as including it within the "input:invalid" area of my css page. Now I just need to know how to have it only appear once and preferably right-aligned.
Please check this I think [this][1] is what you need:
<input type="text" name="text" value="" class="input">
.input{
background-image: url('https://dummyimage.com/20X20/ffffff/0a0a0a&text=x');
background-repeat: no-repeat;
background-position: right;
}
The solution I came up with based on background image coding but within an input CSS container (if that makes sense... still new to this):
input:valid {
background-color: #5CEC87;
background-image: url(green_checkmark.png);
background-repeat: no-repeat;
background-position: right;
}
input:invalid {
background-color: #FD9191;
background-image: url(red_asterisk.png);
background-repeat: no-repeat;
background-position: right;
}
Related
I am searching for a way to display/play a gif inside of a button.
The button should have a gif inside it, that starts playing on hover.
Well, you need to use CSS
<style>
.button {
background: url('gifname.gif');
border: none;
background-repeat: no-repeat;
object-fit: cover;
}
</style>
<button class="button">
I hope that solves your problem
I would like to make the button onclick and also i want to make the button as an image. Here are my code.
<input class="refresh" type="button" onClick="clickclick();">
and the css code is..
.refresh {
background: transparent url(click.png) no-repeat;
width: 30px;
height: 30px;
border: 0px;
cursor: pointer;
}
The good thing is the button can be click but the image is not showing. Any ideas? I'm trying to put CSS to make it easier but if there is another choice and if it is success, I can give it a try. Thanks
no-repeat is a background-repeat value. background-image expects only an image identifier, thus you have bad syntax and it is discarded.
Additionally, you override it anyway with background:transparent.
Try:
background: transparent url(click.png) no-repeat;
OR:
background-color: transparent;
background-image: url(click.png);
background-repeat: no-repeat;
The problem is background:transparent;
Change it to background-color:transparent; and your image will appear just fine.
EDIT - #niet's answer is more complete, use his.
I have a pretty simple Chrome extension to supplement a web page. One of the features is to add links to watch relevant matches on the internet. The relevant HTML is here:
<div class="option-wrap">
<a class="option" href="http://www.google.com" target=_blank>
<div class="option-icon tv-icon"></div>
TV Link
</a>
</div>
With my CSS here:
.tv-icon {
margin-right: 2px;
float: left;
width: 10px;
height: 10px;
background-image: url("http://sayeedanwar.co.uk/wp-content/uploads/2014/01/tv-servizi.png") no-repeat;
display: inline-block;
}
You'll see that several classes appear in the HTML that aren't in my CSS; they are from the web page as it exists. The goal of this code is to get the television icon specified by the URL to appear inline to the right of the text "TV Link". When I run the code, it seems like there is space allocated for the icon, and the cursor is able to click on this space, but there is no visible icon. Is there something wrong with my CSS< or is this a function of the existing webpage code that I'll have to find a workaround for?
Here's a JSFiddle with the mentioned code.
.tv-icon {
margin-right: 2px;
float: left;
width: 20px;
height: 20px;
background-image: url("http://sayeedanwar.co.uk/wp-content/uploads/2014/01/tv-servizi.png");
display: inline-block;
background-size: cover;
background-repeat: no-repeat;
}
JSFiddle
changes I made:
remove 'no-repeat' in 'background-image'
add 'background-size' and 'background-repeat'
I also changed the size. Change it back if you want.
Switch the last two lines of your css to this
background-image: url("http://sayeedanwar.co.uk/wp-content/uploads/2014/01/tv-servizi.png");
background-size: cover;
#Richard Rodriguez - You shouldn't need no-repeat if you have background-size: cover.
Since cover will encompass said area and reduce the opportunity for repeats to null.
I'm using ASP.NET with a C# backend, and want to have a site show different images for mobile and desktop version. I figured I could do this with CSS, but can't figure out how. I have the different css files set up and working for other elements, but for these ImageButtons, I have some bad behavior. If I don't set the ImageUrl attribute, it does what I need but puts "Search" and a gray outline around my buttons since it is looking for the nonexistent ImageUrl Path. If I do set the ImageUrl attribute as shown below, the text and box go away, but the image won't change as I need them to. I have tried this with a and img tags and LinkButtons but have gotten the same results both ways. What is the best way to change the size and image of these buttons if the user is accessing via a mobile device?
<div class="clear hideSkiplink">
<asp:ImageButton ID="button1" runat="server" CssClass="button1"
OnCommand="ImageButton_Click" CommandName="button1"
ImageUrl="~/images/topbutton1.png"/>
...
<asp:ImageButton ID="button4" runat="server" CssClass="button4"
OnCommand="ImageButton_Click" CommandName="button1"
ImageUrl="~/images/topbutton4.png"/>
</div>
CSS classes look like this:
Normal:
.topbutton1
{
padding: 0px 2px;
background-image: url('../images/topbutton1.png');
background-position: center center;
background-repeat: no-repeat;
display: inline;
width: 180px;
height: 60px;
}
Mobile:
.topbutton1
{
padding: 0px 2px;
background-image: url('../images/topbutton1mobile.png');
background-position: center center;
background-repeat: no-repeat;
display: inline;
width: 20%;
height: auto;
}
Use CSS media queries to switch the image based on screen size:
Introduction to CSS Media Queries
I am not good with CSS but have downloaded a template off the net and need to work with that.
I am sure this is a pretty simple thing to do, basically in my html file I have this code:
<div id="topbar"></div>
and in the CSS file I have this code:
#topbar {
height: 104px;
background-image: url(images/logo.png);
background-repeat: no-repeat;
background-position: left top;
}
My question;
how do I make the image/logo into a link (without a border of course) so that people can click it and come back to the homepage?
please recommend a good tutorial to make "table-less" based layouts for html pages.
I am kind of old school and only know how to make a layout with a table, I think i need to upgrade my skills :)
I think you could make the logo into a link like this:
HTML:
<div id="topbar"><img src="images/logo.png" alt="logo"></div>
CSS:
#topbar a {
color: #ffffff;
border: 0;
}
Note: Background images can't be formatted as links.
If you want it to be clickable, you should put the image into the HTML like this:
<img src="images/logo.png" alt="">
and use
#topbar {
display:block;
height: 104px;
background-image: url(images/logo.png);
background-repeat: no-repeat;
background-position: left top;
border:0;
}
Otherwise you'd need to resort to an empty anchor element and/or Javascript, which I'd consider bad practice in this case.
1) Background images can't be made into links. What you could do is make the DIV a link instead:
<a id="topbar"></a>`
#topbar {
height: 104px;
background-image: url(images/logo.png);
background-repeat: no-repeat;
background-position: left top;
display: block;
border: none;
}
2) Google 'css layout' and begin reading. There's hundreds of thousands of tutorials out there. If you are completely lost, I'd start with a good book:
http://www.amazon.com/Bulletproof-Web-Design-flexibility-protecting/dp/0321509021/ref=pd_sim_b8
http://www.amazon.com/Introducing-HTML5-Voices-That-Matter/dp/0321687299/ref=sr_1_7?s=books&ie=UTF8&qid=1318775902&sr=1-7
You really don't want your logo to be a background image. The reason is that background images are not shown when you print. More than likely, you will want your logo visible on a printed copy.