Am having Jquery AutoComplete textbox and we got a requirement to show that as a DropDown(Just look and feel).I came up with some css as below
background-image: url("DropDownIcon.png");
background-position: right center;
background-repeat: no-repeat;
display: inline-block;
vertical-align: middle;
If you notice the first Textbox if there is a long text it is overlapping with icon
What are the other option i can implement to make look and feel good without text overlapping the icon or any other suggestions are welcome
i just to have the look and feel and i dont want to use dropdown
Just add a padding-right:12px; It should work. try this:
background-image: url("DropDownIcon.png");
background-position: right center;
background-repeat: no-repeat;
display: inline-block;
vertical-align: middle;
padding-right:12px;
Updated: check it out
DEMO
Related
I've been trying to find a library with all different types of file icons, so far with no success so I'm going to need to create my own. The idea is that it'll be able to be used in the same way as emoji CSS to display the file icons as it's much easier than the need for individual columns and DIVs. Ideally I'd be able to do <i class="em-filetype"></i> to display it.
Below is an example of how I plan to go about this.
.em,
.em-png {
height: 1.5em;
width: 1.5em;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
vertical-align: middle
}
.em--psd {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Adobe_Photoshop_CC_icon.svg/2000px-Adobe_Photoshop_CC_icon.svg.png")
}
<i class="em--psd"></i>
I'll eventually host all of the images on my own server so that they're available for use. I just need a way of making this work so that I can then write the CSS for each variation. Preferably just the one that then matches the height of the text it is in.
Any help would be appreciated, as would pointing me towards a library you may know about as I'm so far unable to find one fit for purpose so will have to make my own.
Thanks in advance.
Either you need to apply two classes to the element. <i class="em em--psd"></i>
or
Adjust the selectors:
[class^="em-"],
[class*=" em-"],
.em-png {
height: 1.5em;
width: 1.5em;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
vertical-align: middle
}
.em--psd {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Adobe_Photoshop_CC_icon.svg/2000px-Adobe_Photoshop_CC_icon.svg.png")
}
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;
}
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 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.