I am finishing up this table and I added a search function to it. But in the search bar, I want to put a search icon png file for the background image just like the example on W3Schools. I put it in the myInput field, but either nothing appears in the search bar, or it is so massive you can see a tiny top corner piece of the search icon and I cant figure out how to fix it.
#myInput {
background-image: url('https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-512.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
<input type="text" id="myInput">
You need to use the background-size property. Because the image is larger than the input, you are seeing a white portion of the picture. By setting the property to contain the image is shrunk to the size of your input.
#myInput {
background-image: url('https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-512.png');
background-repeat: no-repeat;
background-position: left center;
background-size: 30px;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
<input placeholder="Search..." type="text" id="myInput">
Note: You should also set the background-position property to 0 or remove it all together; otherwise, the search icon will be skewed to the right and downwards.
If instead you want to make the icon smaller, change background-position to left center and set background-size to a px value of your choice.
HTML
<div class="fake-input">
<input type="text" />
<img src="http://www.zermatt-fun.ch/images/mastercard.jpg" width=25 />
</div>
CSS
.fake-input { position: relative; width:240px; }
.fake-input input { border:none; background-color:#fff; display:block; width: 100%; box-sizing: border-box }
.fake-input img { position: absolute; top: 2px; right: 5px }
Source is here
Related
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 5 years ago.
I can't figure this out for the life of me. Why is there an extra pixel at the top of the button? Also why is there extra white space to the left of it? All I am trying to do is have the input and the button next to each other looking connected.
Is this possible?
html{
background: green;
}
form {
height: 40px;
input {
height: 30px;
width: 75%;
max-width: 400px;
padding: 5px 10px;
font-size: 16px;
border: 0;
background: gray;
}
button {
background: #6699FF;
height: 40px;
width: 60px;
background-image: url('https://i.imgur.com/Tp7TTNO.png');
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
background-origin: content-box;
padding: 7px;
border: 0;
color: transparent;
}
}
<form>
<input type="text" name="Term" class="saearch-input" placeholder="Search more than 3800 summaries">
<button type="submit" class="">Search</button>
</form>
If you can't explain it either but know how I can achieve this another way, I'll accept it as an answer as well.
The space is there because a line jump (return) is considered a white space. To avoid this you can:
Put the input and button tags right next to each other (harder to read your code)
Use the "comment hack" where you'd write your code with a <!-- right after the <input> and --> right before the <button>.
Use display: flex on your form to avoid the whitespace being rendered.
For your button positioning issue, it's related to the alignment on the baseline. vertical-align: bottom; on your button will fix this.
See the solution on this Fiddle
You need to change the position of the button:
position: absolute;
top : 8px;
This is the complete css code:
html{
background: green;
}
form {
height: 40px;
input {
height: 30px;
width: 75%;
max-width: 400px;
padding: 5px 10px;
font-size: 16px;
border: 0;
background: gray;
}
button {
position: absolute;
top : 8px;
background: #6699FF;
height: 40px;
width: 60px;
background-image: url('https://i.imgur.com/Tp7TTNO.png');
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
background-origin: content-box;
padding: 7px;
border: 0;
color: transparent;
}
}
Currently i have a lot of back buttons on my page:
<input type="button" id="Back" value="Back" onclick="back();" class="backButton">
I need to add icon to it to look something like this:
First how do I add icon above text and aligne them centrally.
And second is it possible to do it using only CSS. ( if not with only a minor modifications to HTML )
Thx in advance.
I need to add icon to it to look something like this:
First how do I add icon above text and align them centrally.
You should use button element for that. It exists for this very purpose (custom styling and markup). However, you need not to use a background-image for that. To be able to control everything via CSS, just make sure you have same markup for all the buttons you have and then control using classes.
For example:
Markup:
<button class="cancel">
<i></i>
<span>Cancel</span>
</button>
CSS:
button.cancel i::after {
content: '\00d7'; display: block;
font-size: 26px; font-style: normal; font-weight: 600; color: red;
}
Use the after psuedo-element on i (or span whatever) and depending on the class use the content property to insert your icon as text (glyph) which you can style as you want.
And second is it possible to do it using only CSS. ( if not with only
a minor modifications to HTML )
This is very much possible, but cumbersome. I would not recommend this method, it is not worth the effort. You have been warned.
To use the existing input as-is without any change in the markup, you need to style the input itself and will have to use a background-image (in fact two background images). The input styling has a problem, that it loses its platform style as soon as you tinker with its style. So, you will lose the button like behaviour and Windows like button gradient and effects. You will have to replicate all that functionality via CSS.
For example:
Markup:
<input type="button" value="Cancel" data-value="Cancel" />
CSS:
input[type=button] {
min-width: 72px; height: 64px; position: relative;
display: inline-block; vertical-align: top; padding-top: 36px;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/1/1e/Emoji_u274c.svg'),
linear-gradient(#f5f5f5, #dfdfdf);
background-repeat: no-repeat, no-repeat;
background-position: center 4px, center center;
background-size: 24px, auto;
border: 1px solid #aaa; border-radius: 3px;
}
input[type=button]:active {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/1/1e/Emoji_u274c.svg'),
linear-gradient(#dfdfdf, #f5f5f5);
background-repeat: no-repeat, no-repeat;
background-position: center 4px, center center;
background-size: 24px, auto;
outline: 0px;
}
input[type=button]:focus { outline: 0px; }
The above code uses first background-image to show the icon, and second background-image to show the gradient (like Windows platform style). It uses padding-top to push the text down and :active state to set the behaviour of inverting the gradient when clicked. :focus state to remove the outline.
All this to mimic the behaviour of a button! It is much better to use button itself.
Here is a combined demo of both the techniques:
Fiddle: http://jsfiddle.net/abhitalks/yw7wmvwh/1/
Snippet:
button {
min-width: 72px; height: auto;
display: inline-block; vertical-align: top;
}
button.ok i::after {
content: '\2713'; display: block;
font-size: 23px; font-style: normal; font-weight: 600; color: green;
}
button.cancel i::after {
content: '\00d7'; display: block;
font-size: 26px; font-style: normal; font-weight: 600; color: red;
}
input[type=button] {
min-width: 72px; height: 64px; position: relative;
display: inline-block; vertical-align: top; padding-top: 36px;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/1/1e/Emoji_u274c.svg'),
linear-gradient(#f5f5f5, #dfdfdf);
background-repeat: no-repeat, no-repeat;
background-position: center 4px, center center;
background-size: 24px, auto;
border: 1px solid #aaa; border-radius: 3px;
}
input[type=button]:active {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/1/1e/Emoji_u274c.svg'),
linear-gradient(#dfdfdf, #f5f5f5);
background-repeat: no-repeat, no-repeat;
background-position: center 4px, center center;
background-size: 24px, auto;
outline: 0px;
}
input[type=button]:focus { outline: 0px; }
<button class="ok">
<i></i>
<span>Ok</span>
</button>
<button class="cancel">
<i></i>
<span>Cancel</span>
</button>
<hr/>
<input type="button" value="Cancel" data-value="Cancel" />
just add your class to css file
.backButton{
background: url(https://cdn3.iconfinder.com/data/icons/musthave/24/Delete.png) no-repeat;
background-position:center top;
height: 40px;
width: auto;
text-align: center;
padding:24px 10px 10px 10px;
border: 1px solid #555555;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
<input type="button" id="Back" value="Back" onclick="back();" class="backButton">
I hope this will help
HTML
button {
font-size: 20px;
width: 100px;
height: 100px;
}
#rock {
padding:10px;
background: url(https://upload.wikimedia.org/wikipedia/commons/6/65/Crystal_button_cancel.svg) top center ;
background-repeat: no-repeat;
background-position: 50% 10%;
}
<button id="rock" onClick="choose(1)">Cancle</button>
HTML
<button id="btnCancel" onClick="choose(1)">Cancel</button>
CSS
button {
font-size: 20px;
width: 100px;
height: 100px;
}
#btnCancel {
padding:10px;
background: url(https://upload.wikimedia.org/wikipedia/commons/d/da/Crystal_button_cancel.png) top center ;
background-repeat: no-repeat;
background-position: 50% 10%;
border-radius : 20px;
}
I need to create an input text box with a bottom border and the side borders should span half the height of the input on left and right.
Is there an easy way to design this in CSS?
Image is show below:
Maybe this could be an elegant solution.
If you use background then you can specify really nicely where what goes and it improves readability a bit.
input[type="text"] {
padding: 10px;
background: linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000);
background-size: 1px 20%, 100% 1px, 1px 20%;
background-position: bottom left, bottom center, bottom right;
background-repeat: no-repeat;
border: none;
color: #999;
}
<input type="text" />
With 2 box-shadows, you can achieve the bottom border and small borders on both sides. Here is an example:
input[type=text] {
width:300px; height:17px;
border: 0; outline:none;
padding:0;
box-shadow: -5px 5px 0px -4px #000, 5px 5px 0px -4px #000;
text-align:center;
}
<input placeholder="Email" type="text" value=""/>
The spread radius and the X/Y offset of the box-shadows need to be tweaked according to the height of the input and the desired height of left/right borders. As you can see in this example with a different height on the input:
input {
width:300px; height:40px;
padding:0;
border: 0; outline:none;
box-shadow: -18px 18px 0px -17px #000, 18px 18px 0px -17px #000;
text-align:center;
}
<input placeholder="Email" type="text" />
Browser support for box-shadows is IE9+.
I would go for a slightly different approach to web-tiki's answer, and use a wrapper div and a pseudo element, as this would not require a fixed height input (but would require this extra element):
input {
border: none;
}
div {
display: inline-block;
position: relative;
margin-bottom: 30px;
}
div:before {
content: "";
position: absolute;
bottom: 0;
left: -2px;
height: 50%;
width: 100%;
border: 2px solid black;
border-top: none;
}
textarea {
display: block;
height: 100px;
/*border:none*/
/*This was commented to show where text area is*/
}
<div>
<input type="text" placeholder="Please Enter your PIN" />
</div>
<br/>
<div>
<textarea placeholder="Please Enter your bank details and mother's maiden name;)"></textarea>
</div>
A linear-gradient based answer already exists in this thread but it is a bit complex and makes use of multiple linear gradients to achieve the border but it can be done with just one linear-gradient.
Using border-bottom on the element avoids the need for one of those linear gradients. Using a linear gradient which is colored for 2px (2 x required border width), repeats in the X-axis and has a negative offset for background-position in X-axis can produce border on left and right using only one gradient instead of two. The negative offset is equal to border's width (1px). It means that 1px of the gradient is visible on left side and since the gradient repeats in X-axis (and its size is only 100%), the 1px border on the right side is produced by the second tile of the gradient.
A few advantages of this approach are:
It doesn't need any extra real or pseudo-elements. Since input elements are self-closing and so cannot have pseudo-elements, this implies that no extra wrapper elements are required.
The border produced is responsive and can adapt itself even if the input element's dimensions change.
One drawback is that linear-gradient background images are supported only from IE10+.
input[type="text"] {
padding: 2px;
background-image: linear-gradient(to right, black 2px, transparent 2px);
background-repeat: repeat-x;
background-size: 100% 50%;
background-position: -1px bottom;
border: none;
border-bottom: 1px solid black;
color: #999;
text-align: center;
}
input[type="text"].padding {
padding: 4px 10px;
}
.narrow {
width: 100px;
}
.wide {
width: 250px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<input type="text" placeholder="Name" />
<input type="text" placeholder="Address" class="wide" />
<input type="text" placeholder="City" class="narrow" />
<input type="text" placeholder="Email" class="padding" />
You can use pseudo elements :
input {
position: relative;
width: 200px;
height: 18px;
border: none;
outline: none;
}
::-webkit-input-placeholder {
text-align: center;
text-transform: uppercase;
}
:-moz-placeholder {
/* Firefox 18- */
text-align: center;
text-transform: uppercase;
}
::-moz-placeholder {
/* Firefox 19+ */
text-align: center;
text-transform: uppercase;
}
:-ms-input-placeholder {
text-align: center;
text-transform: uppercase;
}
div {
position: relative;
}
div::before {
content: '';
display: block;
position: absolute;
left: -1px;
bottom: -1px;
width: 204px;
height: 9px;
background-color: red;
}
<div>
<input type="text" placeholder="email" />
</div>
I am facing an issue with IE browser (all versions till IE 10). Issue
Text in input box is overlapping its background image. I cant put this image in parent div as its a dynamic input box and having lot of other functionality. and i cant increase the width of textbox than 100px and value is about 50 characters.
pls help.
CSS
.some {
background:url(http://cmsresources.windowsphone.com/windowsphone/en-us/How-to/wp8/inline/hardware-icon-search-button.png) no-repeat right center;
padding:1px 15px 1px 1px;
border:1px solid #ccc;
width:100px;
color:red;
overflow:hidden;}
HTML
<input type="text" class="some" value="I am a messy input box" />
Try this demo with IE8: http://jsfiddle.net/74u4w/2/
If it works, just add the border to the image and you will have a fix
.some {
background-image: url(http://cmsresources.windowsphone.com/windowsphone/en-us/How-to/wp8/inline/hardware-icon-search-button.png);
background-position: 105px -6px;
background-repeat: no-repeat;
padding: 1px 1px 1px 1px;
border: 1px solid #ccc;
border-right: 25px solid transparent;
width: 100px;
color: red;
overflow: hidden;
}
If not, then the last resort is a small javascript that appends an img/div after your input. (which can be done dynamically)
With an absolute position set, it will not affect the flow. This css sample shows how it could look:
.some {
padding: 1px 1px 1px 1px;
border: 1px solid #ccc;
width: 80px; /* narrowed to fit img */
color: red;
overflow: hidden;
}
.someimg {
background-image: url(http://cmsresources.windowsphone.com/windowsphone/en-us/How-to/wp8/inline/hardware-icon-search-button.png);
background-position: center center;
background-repeat: no-repeat;
position: absolute;
overflow: hidden;
left: ?px; /* needs to be calculated based on each input */
top: ?px; /* needs to be calculated based on each input */
width: 20px;
height: 20px;
}
Decrease input field width and add padding from right
DEMO FIDDLE
I have an HTML input field like this. I would like to place an image inside the textbox on the right side. Can someone help me out with its CSS for that?
<input type="text" id="name"/>
In the picture is an image which is inside the text field email address, which is what I want. How do you do this?
HTML
<div class="fake-input">
<input type="text" />
<img src="http://www.zermatt-fun.ch/images/mastercard.jpg" width=25 />
</div>
CSS
.fake-input { position: relative; width:240px; }
.fake-input input { border:none; background-color:#fff; display:block; width: 100%; box-sizing: border-box }
.fake-input img { position: absolute; top: 2px; right: 5px }
Working demo
http://jsfiddle.net/HnJZa/
try this:
input {
background-image: url("icon.png");
background-position: right top;
background-repeat: no-repeat;
background-size: contain;
}
you can try something like this
.textBox{
background-image:url(iconimage.jpg);
background-position:right;
background-repeat:no-repeat;
padding-left:17px;
}
Then apply this style to your text box:
<input type="text" class="textBox" />
Use background-image and background-position property
DEMO
CSS:
input {
height: 70px;
width: 200px;
background-image:url("http://cloud.ohloh.net/attachments/25869/plone-icon-64_med.png");
background-repeat:no-repeat;
background-position: 133px 3px;
}
.text3 {
width: 300px;
height: 30px;
}
#text3 {
background-image: url(https://cdn3.iconfinder.com/data/icons/interface-8/128/InterfaceExpendet-09-128.png);
background-size: 30px;
background-repeat: no-repeat;
}
input {
text-align: center;
}
<p class="email">
Email
</p>
<input type="text" placeholder="Email_ID" class="text3" id="text3">
The answers above didn't replicate the format shown in the questioners image, or provide any explanation. This is a solution using background images.
Explanation of the background image syntax.
background: url('https://d1ululg65bfe3q.cloudfront.net/images/troy/email-icon.png') no-repeat 97.25% 10px white;
Location of image: url('https://d1ululg65bfe3q.cloudfront.net/images/troy/email-icon.png')
Show image once: no-repeat
Distance from left: 97.25%
Distance from top: 10px
Background color: white
.bg-email-icon {
background: url('https://d1ululg65bfe3q.cloudfront.net/images/troy/email-icon.png') no-repeat 97.25% 10px white;
padding-left: 5px;
padding-right: 50px;
width: 255px;
height: 30px;
border: 1px gray solid;
border-radius: 5px 5px 0px 0px;
}
.bg-lock-icon {
background: url('https://d1ululg65bfe3q.cloudfront.net/images/troy/lock-icon.png') no-repeat 96.75% 10px white;
padding-left: 5px;
padding-right: 50px;
width: 255px;
height: 30px;
border: 1px gray solid;
border-top-width: 0px;
border-radius: 0px 0px 5px 5px;
}
<input name="exampleEmail" class="bg-email-icon" placeholder="Email" type="email">
<input name="examplePassword" class="bg-lock-icon" placeholder="Password" type="password">
You can add class to your input
<input type="text" id="name" class="inputImage" />
and then background image to class in css
.inputImage
{
background:#FFFFFF url('img.jpg') no-repeat top right;
}
You need to add class like this:
CSS:
.bgInput {
background: url(path of your image.jpg) top right no-repeat;
}
HTML:
<input type="text" class="bgInput" id="name"/>
A small answer: you can do this by setting as a background image of input field.
try:
#name {
background: url('path/image.png') right no-repeat;
}