I am trying to use multiple background images to customise an input box but for some reason the background image doesn't work.
What I am trying to achieve is this:
The multiple background images are:
Any help is highly appreciated.
.login-block input#username {
background: #2b2e30 url('https://s27.postimg.org/izumvqjr7/login_input_bg.jpg') 100% 41px no-repeat, url('https://s29.postimg.org/qdrqvmr0n/user_login_icon.png') left 10px no-repeat;
background-size: 100% 41px;
background-position: left top;
}
.login-block input {
border: medium none;
box-sizing: border-box;
color: #9c9b9b;
display: block;
font-size: 14px;
height: 41px !important;
margin-bottom: 20px;
padding: 0 20px 0 50px;
width: 100%;
}
<div class="login-block">
<input value="" placeholder="Username" id="username" type="text">
</div>
Show the icon first, then the bg and then the hex background
.login-block input#username {
background:url('https://s29.postimg.org/qdrqvmr0n/user_login_icon.png') 41px 41px no-repeat,url('https://s27.postimg.org/izumvqjr7/login_input_bg.jpg') 100% 41px no-repeat,#2b2e30;
background-position:10px center, left center;
}
.login-block input {
border: medium none;
box-sizing: border-box;
color: #9c9b9b;
display: block;
font-size: 14px;
height: 41px !important;
margin-bottom: 20px;
padding: 0 20px 0 50px;
width: 100%;
}
<div class="login-block">
<input value="" placeholder="Username" id="username" type="text">
</div>
Related
I have a project to create a website designed in PhotoShop. I want to create a to textbox in HTML and CSS which looks like this:
As you can see, there is no problem with the background or fonts; the problem is the textbox. How can I create textboxes with these curves?
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
div {
background: #444;
direction: rtl;
width: 300px;
padding: 20px;
}
label {
width: 100%;
color: #fff
}
input {
border-radius: 0 2em;
padding: 0 10px;
width: 100%;
border: none;
line-height: 2em;
margin-bottom: 20px;
}
textarea {
border-radius: 0 4em;
padding: 0 10px;
width: 100%;
border: none;
line-height: 2em;
margin-bottom: 20px;
}
input[type="submit"] {
max-width: 100px;
}
<div class="wrapper">
<label>Name</label>
<input type="text" />
<label>Email</label>
<input type="text" />
<label>Message</label>
<textarea></textarea>
<input type="submit" value="Submit" />
</div>
This is how to get the shape in your image. You will need to learn a bit about border-radius.
The following is an example:
div#test {
border: thin solid #666;
width: 8em;
height: 2em;
border-radius: 0 2em 0 2em;
}
<div id="test"> </div>
The border-radius property is responsible for rounding corners. It can be very sophisticated, but the simple one here will do the job. You will just need to adjust some of the values.
The four values in the border-radius property represent the radius of the individual borders, clockwise from the top-left corner.
I've the following tags
<input id="date" class="mandatory datepicker" type="date" name="Date"></input>
<input id="name" class="mandatory" type="text" name="Name"></input>
What I want to do is to have a common CSS background image for two fields on the left side which I am able to do using the mandatory class and have an unique CSS background image on the right side for the date field using datepicker class along with the common CSS.
What I want is
What I get is
So can I do that?
Below are the CSS codes which I tried but couldn't get what I wanted.
.mandatory {
background: #FFFFFF url(http://www.freecakefreecake.com/blog/wp-content/themes/Aggregate/epanel/shortcodes/images/list-dot.png) no-repeat 4px 4px;
background-position: left;
}
.mandatory.datepicker {
background: #FFFFFF url(http://upload.wikimedia.org/wikipedia/commons/9/99/Dot1.png) no-repeat 4px 4px;
background-position: right;
}
Is the datepicker image overlapping the mandatory image? If so how do I solve this issue?
Fiddle: http://jsfiddle.net/kumareloaded/aybghsfp/
UPDATE DUE TO COMMENT
input{position: relative}
.mandatory {
background: #FFFFFF url(http://www.freecakefreecake.com/blog/wp-content/themes/Aggregate/epanel/shortcodes/images/list-dot.png) no-repeat 4px 4px;
background-position: left;
}
.mandatory.datepicker {
background: #FFFFFF url(http://upload.wikimedia.org/wikipedia/commons/9/99/Dot1.png) no-repeat 4px 4px;
background-position: right;
text-indent: 4px
}
.mandatory.datepicker:before {
content:'';
position: absolute;
background: #FFFFFF url(http://www.freecakefreecake.com/blog/wp-content/themes/Aggregate/epanel/shortcodes/images/list-dot.png) no-repeat 4px 4px;
background-position: left;
width: 12px;
height: 14px;
top: 2px;
}
<input id="date" class="mandatory datepicker" type="date" name="Date" />
<input id="name" class="mandatory" type="text" name="Name" />
UPDATE: change your markup to this then (for typing reasons they have to be outside the box)
*{box-sizing: border-box; padding: 0; margin: 0}
form{
padding: 40px
}
[class=name]{
margin: 0 20px 0 80px
}
[class=date],[class=name],[class=submit]{
display: inline-block;
width: 160px;
height: 40px;
position: relative
}
input[id=name],input[id=date]{
width: 100%
}
[type=submit]{
width: 100%;
padding: 10px 0;
}
label[for=date],label[for=name]{
display: inline-block;
width: 16px;
height: 16px;
position: absolute;
left: -32px;
top: 2px;
border-radius: 50%
}
[class=date]:before{
content:'';
position: absolute;
right: -32px;
top: 2px;
background: yellow;
width: 16px;
height: 16px;
border-radius: 50%
}
input:valid + label[for=date],input:valid + label[for=name]{
background: green
}
input:invalid + label[for=date],input:invalid + label[for=name]{
background: red
}
<form>
<div class=date>
<input id=date class="mandatory datepicker" type=date name=Date required />
<label for=date></label>
</div>
<div class=name>
<input id=name class=mandatory type=text name=Name required />
<label for=name></label>
</div>
<div class=submit>
<input type=submit value=validate />
</div>
</form>
you can not style inputs easily that is why you should use label since they are going together
label{
position: relative;
display: inline-block;
width: 32px;
height: 32px;
cursor: pointer; margin-right: 10px
}
label[for=date]:after{
background: red
}
label[for=name]:after{
background: green
}
label:after{
content: '';
position: absolute;
top: 10px;
left: 0px;
width: 32px;
height: 32px;
border-radius: 50%;
border: 4px solid #333
}
<label for=date></label>
<input id=date class="mandatory datepicker" type=date name=Date />
<label for=name></label>
<input id=name class=mandatory type=text name=Name />
Use something like this
.mandatory {
background: #FFFFFF url(../images/mandatory.png) no-repeat 4px 4px;
background-position: left;
display:inline-block;
position:relative;
}
.mandatory.datepicker:after {
content:'';
display:block;
width:10px; /*Change accordinlgly*/
height:10px; /*Change accordinlgly*/
position:absolute;
top:5px; /*Change accordinlgly*/
right:5px; /*Change accordinlgly*/
background: url(../images/datepicker.png) no-repeat;
}
you can do this by using display:inline-block property for both the images.
.mandatory {
background: #FFFFFF url(../images/mandatory.png) no-repeat 4px 4px;
background-position: left;
display:inline-block;
}
.mandatory.datepicker {
background: #FFFFFF url(../images/datepicker.png) no-repeat 4px 4px;
background-position: right;
displya:inline-block;
}
Thanks all for your valuable inputs.
I was able to get the solution by using the following CSS.
.mandatory {
background: #FFFFFF url(http://www.freecakefreecake.com/blog/wp-content/themes/Aggregate/epanel/shortcodes/images/list-dot.png) no-repeat 4px 4px;
background-position: left;
}
.mandatory.datepicker {
background-image: url(http://www.freecakefreecake.com/blog/wp-content/themes/Aggregate/epanel/shortcodes/images/list-dot.png), url(http://upload.wikimedia.org/wikipedia/commons/9/99/Dot1.png);
background-repeat: repeat-y;
background-position: left, right;
}
Fiddle: http://jsfiddle.net/kumareloaded/jcpLp492/
.input {
background: url(assets/Symbol39-2-min.png) no-repeat right center,
url(assets/Symbol38-2-min.png) no-repeat left center;
}
I have the following form that I want to customize.
<form>
<input type="text" value="" />
<button></button>
</form>
I want the button to have a background image and no text.
The problem is that the button loses its vertical alignment when I don't write any text into it.
Can someone explain this behaviour?
input {
width: 200px;
height: 20px;
border: 1px solid #0066cc;
border-radius: 20px;
padding: 0;
}
button {
margin-left: -30px;
background-color: white;
background-image: url("http://s18.postimg.org/k6rruvokl/loupe_recherche.gif");
background-repeat: no-repeat;
background-position: center center;
border: none;
width: 19px;
height: 19px;
padding: 0;
}
<form>
<input type="text" value="" />
<button></button>
</form>
<form>
<input type="text" value="" />
<button>Some text</button>
</form>
Because they have a default vertical-align property of baseline, which alignes inline elements according to the bottom of the element's content (the text).
If there is no content, the vertical alignment cannot be based upon it, instead it is based on the bottom of the element.
You can fix this with a non-breaking space, or by changing the vertical alignment.
<form>
<input type="text" value="" />
<button> </button>
</form>
JSFiddle
-- Or --
button {
margin-left: -30px;
background-color: white;
background-image: url("http://s18.postimg.org/k6rruvokl/loupe_recherche.gif");
background-repeat: no-repeat;
background-position: center center;
border: none;
width: 19px;
height: 19px;
padding: 0;
vertical-align:middle;
}
JSFiddle
A good read:
All you need to know about vertical-align - Christopher Aue
If you add the vertical-align indicator to the button it should help it move to the position you want, it will need a little bit of extra margin just to push it up a bit though.
Try this out:
input {
width: 200px;
height: 20px;
border: 1px solid #0066cc;
border-radius: 20px;
padding: 0;
}
button {
margin-left: -31px;
background-color: white;
background-image: url("http://s18.postimg.org/k6rruvokl/loupe_recherche.gif");
background-repeat: no-repeat;
background-position: center center;
border: none;
width: 19px;
height: 19px;
padding: 0;
vertical-align: bottom;
margin-bottom: 1px;
}
<form>
<input type="text" value="" />
<button></button>
</form>
This seems to be a matter of vertical alignment because the elements are inline-(block?)
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
input {
width: 200px;
height: 20px;
border: 1px solid #0066cc;
border-radius: 20px;
vertical-align: top;
}
button {
background-color: white;
background-image: url("http://s18.postimg.org/k6rruvokl/loupe_recherche.gif");
background-repeat: no-repeat;
background-position: center center;
border: none;
width: 20px;
height: 20px;
border: 1px solid red;
vertical-align: top;
}
<form>
<input type="text" value="" />
<button></button>
</form>
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;
}
1st sorry if the title is not 100% at the pont, i really have no idea how to compose it.
Anyway here is a simple problem with 100% width layout. I have a form that is inside a fluid container, it has - 1 input, 1 select, 1 button, they all are align inline (horizontal)
the problem when i minimize the window the button and then the select list they move down. which i dont want that.
Here is a example in the fiddle http://jsfiddle.net/4GSLE/ you can minimize the html part and you will see the problem.
How to make them to be in one line and not to move down?
.main {
max-width: 1200px;
margin: 0px auto;
background-color: #eee;
line-height: 50px;
padding: 10px;
}
form {
padding: 0 0 0 0;
margin: 0 0 0 0;
display: block;
}
.clear {clear: both;}
input, select {
float: left;
height: 50px !important;
padding: 0 10px;
width: 66% !important;
border: 1px solid #d6d8db;
margin-right: 20px;
}
input.button {
height: 54px !important;
padding: 0 10px;
margin-top: -1px !important;
width: 125px !important;
border: 1px solid #d6d8db !important;
background: #333;
cursor: pointer;
color: #fff;
}
select {
width: 200px !important;
height: 52px !important;
}
html:
<div class="main">
<form>
<input type="text" name="" value="search" />
<select>
<option>select</option>
</select>
<input type="submit" name="" value="Search now" class="button" />
</form>
<div class="clear"></div>
</div>
Some CSS tweaking to the form, input, and select selectors should do the trick.
form {
padding: 0;
margin: 0;
display: block;
white-space: nowrap;
}
input, select {
display: inline-block;
height: 50px;
padding: 0 10px;
width: 66%;
border: 1px solid #d6d8db;
margin-right: 20px;
}
Demo Here
Side note: Unless you really need them, all those !important declarations will end up causing more trouble than solving issues. I'd avoid !important as much as possible.