Using background image to input box and padding value would show like this:
Now how to apply border-right to the background-image?
Or, what's the best practice to make this?
I have just like these inputs
<form>
<input type="text" />
<input type="text" />
<input type="submit" />
</form>
css
input{background: url('path') no-repeat left center; padding-left: 50px;}
I would just add the border-right to the background image like so:
CSS
input[type=text]{
background: url('http://uploadpie.com/LctRy') no-repeat left center;
padding: 18px 0 18px 70px;
border: 1px solid #eaeaea;
font-size: 17px;
color: #999;
}
Demo
Well I played with some box-shadows and I came up with this
FIDDLE
input[type="text"] {
padding: 15px;
border: 1px solid #ccc;
padding-left: 60px;
background-image: url("http://i.imgur.com/m8lJN4g.png");
background-repeat: no-repeat;
background-position: 2px 3px;
box-shadow: inset -175px 0px #fff, inset -176px 0px #ccc;
}
You can just add border to the background image. If you are not targeting for browsers from IE6. If you are checking from IE6 then you have to wrap the textbox within span or div and add background image to div. Hope this helps.
Related
I'm working on a input text with image and I'm trying to position the image on the right side corner of the input text and it seems that my top positioning has different output in different browsers. So I have this HTML structure like so:
<div class="bcb-box-left-content">
<input type="text" name="skills" id="skills"/>
<img src="assets/images/plus-in-box.png" alt=""/>
<p>Maxiumum 3 skills for a guest account.</p>
</div>
And here is the style for that:
/*----the parent container-----------*/
.bcb-box-left-content
{
max-width:444px;
margin-left:17px;
position:relative;
margin-right:20px;}
/**********the anchor *********/
.bcb-box-left-content a
{
position: absolute;
bottom: 0;
right: 4px;
top:5px;
}
/**********the input text *********/
#skills {
width:100%; padding: 10px 20px 10px 10px;
}
So now is there any approach like this (but not literally the code itself):
/*in this case TOP for chrome*/
-webkit-box-shadow: 0px 3px 3px 0px rgba(57,72,83,1);
/*in this case TOP for mozilla*/
-moz-box-shadow: 0px 3px 3px 0px rgba(57,72,83,1);
/*in this case TOP for normal*/
box-shadow: 0px 3px 3px 0px rgba(57,72,83,1);
DEMO:
http://jsfiddle.net/leonardeveloper/Wm4ML/
Apply margin and default border property to your #skills class. It will give the same result on all the browsers as you mentioned. Update your CSS like below.
#skills
{
width:100%;
padding: 10px 0px 10px 10px;
margin:0;
border:1px solid #ccc;
}
DEMO
http://jsfiddle.net/g54p4/
HTML and CSS is in jsfiddle in case if you need to see.
<div class="box-input">
<input type="text" placeholder="Email Address" class="input-icon-email cly-pvxl" name="email">
</div>
<div class="box-input">
<input type="text" placeholder="Email Address" class="input-icon-email cly-pvxl" name="email">
</div>
CSS
.box-input{
border-left: 7px solid transparent;
cursor: pointer;
display: block;
vertical-align: middle;
width: 100%;
}
.box-input:hover,
.box-input:focus{
border-left: 7px solid green;
}
.box-input input{
width: 100%;
border: 0;
padding-left: 80px;
}
.box-input input:focus,
.box-input input:hover{
outline: 1px solid #eee;
}
.input-icon-email{
display: inline-block;
position: relative;
vertical-align: middle;
height: 34px;
width: 34px;
background: url('http://mbsales.com/WebAssets/email_icon1.gif') left center no-repeat;
padding-left: 30px;
}
Tried fake input div so that it would display border-left green but realized when go to next field by entering tab, it won't show border-left green. other problem is if try to add border-left green in input css, it will display when focus, and image icon will be jumpy. Also wanted to push the icon away with padding left but nothing happened.
Perhaps might be doing it wrong.
Help appreciated.
You can try this:
working DEMO
add this:
.box-input input{ border-left: 7px solid transparent;}
and return the hover style to the input:
.box-input input:focus,
.box-input input:hover{
outline: 1px solid #eee;
border-left: 7px solid green;
}
You can as well use box-shadow : DEMO outset - DEMO inset
input:focus {
box-shadow: -7px 0 0 0 green;
}
or even
input:focus {
box-shadow: inset 7px 0 0 0 green;
}
This will be added to any borders already here and remains as long as input has focus. ouset box-shadow may change outline renderer from browser to browser , inset should not and inset will drawn hover background if any.
Ive used the CSS :after selector to create an arrow for my links. This works fine but now I want to do the same thing to form inputs.
If I use the same class on the submit button then the :after is ignored, im assuming because the element cant contain other other elements.
If I apply the class to a div containing the submit button then it looks fine, but the arrow and padding outside of the actual submit button isnt clickable.
Is there a solution to this?
http://jsfiddle.net/jn7Vj/5/
.button-style {
background: -moz-linear-gradient(top, #02AD85, #019975);
background: -webkit-linear-gradient(top, #02AD85, #019975);
background: linear-gradient(top, #02AD85, #019975);
padding: 0.7em;
border-radius: 0.5em;
border-bottom: 4px solid #003E30;
box-shadow: 0 2px 0px #252D42;
font-size: 15px; //findme
margin-top: 15px;
display: inline-block;
margin-top: 10px; //findme
border-top: none;
border-right: none;
border-left: none;
color: white;
font-size: 12px;
}
.button-style:after {
content: '';
display: inline-block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0.4em 0 0.4em 0.7em;
border-color: transparent transparent transparent #FFF;
margin-left: 0.75em;
}
.button-style input {
background: none;
border: none;
color: white;
font-size: 12px;
margin: 0;
padding: 0;
}
Here is a link
<form class="webform-client-form" enctype="multipart/form-data" action="/cchetwood/4/contact" method="post" id="webform-client-form-4" accept-charset="UTF-8"><div><div class="form-item webform-component webform-component-textfield" id="webform-component-full-name">
<input type="text" id="edit-submitted-preferred-times-to-contact-optional" name="submitted[preferred_times_to_contact_optional]" value="" size="60" maxlength="128" class="form-text">
<input type="submit" class="button-style" value="Submit">
<div class="button-style">
<input type="submit" value="Submit">
</div>
</form>
The CSS after pseudo element doesn't work on input fields (https://stackoverflow.com/questions/9840768/css-after-input-does-not-seem-to-work). Unfortunately your only solution here is to add the triangle as a background image on the input field or surround the field with something like a div or a span and add the after selector to that element.
As for your button, I would suggest changing it from an input element to a button, you can then apply the after selector to that.
EDIT
After reading your question again, I'm not sure if you want to add the triangle to your text input but here is a jsFiddle with the style added only to the buttons: http://jsfiddle.net/jn7Vj/9/
add for .button-style position:relative; padding: 0;
add for .button-style input padding: 0.7em 2em 0.7em 1em; --> you can change this sizes, main idea is move padding from .button-style to .button-style input
add next css-rules for .button-style:after
position:absolute;
top:50%;
right:10%;
margin: -0.2em 0 0 0;
I've found cool article http://www.tripwiremagazine.com/2012/01/how-to-create-a-seach-bar-in-photoshop.html recently. Don't know how to handle background images inside responsive grid. How do I make such a search bar using Zurb Foundation grid? Is it possible?
Thanks!
The search bar in the design could be styled completely with CSS and then you wouldn't have to use background images at all. Here are a few main points of code that would make this work:
HTML:
<div class="input-container">
<input type="text" />
<button>Search</button>
</div>
The text input:
input[type="text"] {
box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
border-radius: 5px;
background-color: #fff;
}
the button:
button {
margin-left: -10%;
background-image: -webkit-linear-gradient(top, #117a03 0%,#287c15 100%);
border-radius: 0 5px 5px 0;
height: 32px;
padding: 0 5px;
border: 1px solid #bbb;
box-shadow: inset 0 1px 2px rgba(0,0,0,.3), 0 1px #fff;
color: #074F03;
text-shadow: 0px 1px #ccc;
font-weight: bold;
}
You need to add the vendor prefixes for CSS3 properties, but this is a pretty basic starting point and should give you everything you need. Here's a fiddle with it working: http://jsfiddle.net/J6Dvz/
I Have the following HTML and CSS for the current scenerio:
As you can see, the search textbox and the filter dropdown are appearing perfectly in-line. But the button is appearing down.
Here is the HTML code for all the 3 controls:
<table>
<tbody>
<tr>
<td>
<div class="search_result_div">
<div>
<input type="text" style="width:200px;" id='searchButton' value="some text"><span> in </span>
<select id="filterDropdown">
<option value="all" selected="selected">All Areas</option>
<option value="docs">Documents</option>
</select>
<a onclick="return callSearch();" class="btn" id="searchButton" href="../sys/SearchResults.aspx?q="><span>Search</span></a>
</div>
</div>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
Here is the CSS for all the controls:
.search_result_div a.btn
{
background: url("/images/bg_btn_left.gif") no-repeat scroll left center transparent;
display: inline !important;
float: none;
font-size: 11px !important;
line-height: 21px !important;
margin: 0 !important;
outline: medium none;
padding: 3px 0 3px 2px !important;
text-indent: inherit !important;
}
.search_result_div a.btn span
{
background: url("/images/bg_btn.gif") no-repeat scroll right center transparent;
font-weight: bold !important;
margin: 0 !important;
padding: 4px 8px 4px 6px !important;
}
Note: The button is divided into two images.
bg_btn_left.gif :
bg_btn:
Please suggest where am I going wrong?
Thanks
Try this:
<style type="text/css">
.search_result_div a.btn
{
background: url("bg_btn_left.gif") no-repeat scroll left top transparent;
display: inline !important;
float: none;
font-size: 11px !important;
line-height: 21px !important;
margin: 0 !important;
outline: medium none;
padding: 4px 0 3px 2px !important;
text-indent: inherit !important;
}
.search_result_div a.btn span
{
background: url("bg_btn.gif") no-repeat scroll right top transparent;
vertical-align:top;
font-weight: bold !important;
margin: 0 !important;
padding: 4px 8px 4px 6px !important;
}
</style>
Its one of the problems I had to go through myself. I think I solved it by setting all default margins and paddings to zero. See if that helps you.
*{margin:0px; padding:0px;}
or if its a problem of aligning use
vertical-align: middle;
For inline elements, you can use the vertical-align: middle; CSS property to align verticaly.
look here it is: http://jsfiddle.net/YUXxf/
your code is working as you wish but i think the image has a top border bigger which is pushing the image downwards..
I always add this css file css.reset to my project to make sure i don't use the default css settings defined by the browser.
Hey i think you should give to some properties your .search_result_div a.btn
as like this
input{
vertical-align:top;
}
.search_result_div a.btn{
display:inline-block;
vertical-align:top;
*display:inline; // for ie
}