I'm trying to create a custom form input that utilizes some images, it should look like this:
I've tried the following:
<style>
input {
background-image: url(../img/search-background-middle.png);
background-repeat: repeat-x;
padding: 17px 0;
font-size: 12px;
border: none;
margin: 0;
}
form {
padding: 0;
margin: 0;
}
</style>
<body>
<form>
<img src="../img/search-background-left.png"/>
<input type="text" value=" start typing to search..." size="40" maxlength="255" />
<img src="../img/search-background-right.png"/>
</form>
</body>
Which results in:
Why?? I'm not only interested in the solution, but also in the reason why this doesn't work. I think my understanding of inline elements put next to each other is flawed.
Try setting the vertical-align to top
form * {vertical-align:top;}
also remove the spaces between the imgs and the input
remove whitespace between img and input elements (including linebreaks)
set height and line-height on input element to match the image height
set padding and margin to 0 on input.
you may also need to add a float: left !important; to the input. Sometimes that fixes my issues when things aren't lining up
Related
I have a MailChimp for WordPress plugin with form code as such
<p>
<label>Get new posts delivered to your inbox!</label>
<input type="email" id="my-input" name="EMAIL" align="right" placeholder="Your email address" required />
</p>
<p>
<input type="submit" value="Subscribe" />
</p>
It looks like this on the sidebar:
It seems everything is correctly right aligned within the sidebar except my input form. There is a right margin that I cannot get rid of.
I can put customer CSS like so, but it doesn't so anything.
#my-input {
text-align: right; /* This works */
margin-right: 0px; /* This doesn't work */
}
Any tips to edit either the HTML or the custom CSS to get this working?
You can try this code:
#my-input {
text-align: right;
margin-right: 0 !important;
display: block;
width: 100%;
}
paste this
#my-input {
margin-left: 320px !important;
width: 50%; }
you can check out here https://www.w3schools.com/code/tryit.asp?filename=FPP4AWLPX1NP
In my specific case, the solution was
#my-input {
width: 100%; /* Somehow width was not already 100% by default */
}
Maybe it was something in the Customizr Wordpress theme I was using that messed it up.
Thanks #BM RAFIQ for giving me code to try, if width 100% doesn't work for you try some of the other code he wrote.
if you want to use margin for input tag you have to specified width and using display:block. look at this question it may help you.
another way which I don't recommend is using !important. you can add margin-right:0px !important; in css.
I was wondering about the textarea box bit.ly has on the 1st page you log in where they state to "Shorten your links and share from here".
I was wondering how you would go about centering text in a textarea? I don't think there's a command, so how would you hardcode move it down a few spaces. You can't use html tags in the textarea so it's been difficult with or other methods
Are you sure it's a textarea and not just an <input type="text">? If it's the latter, you can achieve the effect quite easily with padding:
input[type=text] { font-size: 20px; padding: 5px; }
Edit: If it's a text area (say with one row), styling via padding works the same:
textarea { font-size: 20px; padding: 5px; }
Set textarea padding and margin 0 and set the line-height. Or it would be better to use padding like Kerrek posted
You can't center multi line text in a textarea but you can add padding.
<!doctype html>
<style>
input[type=text]{margin:0;padding:0;line-height:40px;font-size:40px;}
</style>
<input type=text>
I am trying to create a search bar like Google's after the user begins to type in a keywords. I usually try to align the search bar with the submit button. If I can get it to line up correctly in Firefox, it usually won't line up correctly in Chrome. Is Google actually lining up the two inputs, or is there a way to put the actual button inside of the search bar and position it to the very right?
Edit: Well, I guess it is more of a conceptual question. I do not actually have any code. I just remember my last attempts to try to align the search bar and button failed horribly. How does Google align up their search box and submit button so well?
Edit 2:
Here is my HTML:
<form method="get" action="">
<div id="search-outer">
<input id="search-input" type="text" name="search" /><input id="search-submit" type="submit" value="Search" />
</div></form>
Here is my CSS:
#search-outer {
width: 600px;
margin: 0 0 10px 0;
}
#search-input {
margin: 0;
width: 400px;
font-size: 20px;
padding: 5px;
border: 1px solid #EEEEEE;
}
#search-submit {
margin: 0;
font-size: 20px;
padding: 5px;
border: 1px solid #EEEEEE;
}
They are still off a little bit. If I give them specific heights, then the button's position begins to be above the input's position.
If you want pixel-perfect control of two elements next to eachother, one approach I often find crossbrowser successful is to absolute position the right element, but use margins instead of top/left, like so:
<html>
<body>
<input/>
<input type="submit" style="position:absolute;margin:42px 0 0 10px;"/>
</body>
</html>
Using margins will position it relative to its position of orgin, which is on the right of the input field in this case. Using top/left would position it relative to its offset parent, which could be an ancestor element.
<form method="post" action="">
<div id="div">
<input type="text" />
<input type="submit" value="send" />
</div>
</form>
#div { width: 100px; margin: 0 auto; text-align: center;}
You'd generally surround both with a container and align to one edge of that. Remove (reset) margins to 0 to avoid browser-specific alignment issues.
I've looked everywhere but to no avail.
I got a <legend> in a form, which displays as I want in every browsers, except in Chrome. It's like it sits outside of the fieldset, or it's like it goes on top of the next element. And it's very annoying. I can't even put margins on it.
Why does it display like in that way?
And is there a workaround?
HTML:
<fieldset class="col-12-box-bottom add-extras">
<legend class="plus">Add Promotion Code</legend>
<ul id="promo-fields">
<li><input class="field-small" type="text" /></li>
<li><button class="but-sec" type="submit">Apply</button></li>
</ul>
</fieldset>
CSS:
.add-extras legend{
width: 260px;
height: 0px;
border: 1px solid red;
display: block;
margin-top: 10px;
}
.add-extras fieldset{
position: relative;
}
.add-extras ul{
padding: 0 0 20px 0 !important;
overflow: hidden;
}
.add-extras li{
list-style-type: none;
float: left;
margin: 0 18px 0 0;
}
.add-extras li:last-child a{
color: #afafaf;
display: block;
margin: 27px 0px 0 0;
}
fieldset.add-extras{
margin: 0px 0 23px 0;
}
.add-extras label{
float: none;
display: block;
text-align: left;
width: 110px;
font-weight: bold;
margin: 0 0 5px 0;
}
This is a known issue with the legend element in webkit browsers. There are no clean workarounds for the legend element itself, but you could instead add the margin to the first element that follows the legend.
Also, you'll have to explicitly set -webkit-margin-collapse: separate on that element to make it work properly. Try using this:
legend + * {
-webkit-margin-top-collapse: separate;
margin-top: 10px;
}
http://jsfiddle.net/JLsPs/1/
(answer found here: Cannot add `margin` to `<legend>` element in Safari & Chrome (WebKit))
I have struggled with this issue many times, eventually leading to my abandoning the legend tag until recent, where I have begun using it again to add more semantic meaning to my markup.
Here is a fix I have devised to control the appearance of the legend tag's layout in relation to it's siblings:
Markup:
<div class="fieldset">
<fieldset>
<legend>Form Section</legend>
<div class="field_row">
<label for="first_name">First Name</label>
<input id="first_name" name="first_name" type="text">
</div>
<div class="field_row">
<label for="last_name">Last Name</label>
<input id="last_name" name="last_name" type="text">
</div>
</fieldset>
</div>
Styles:
.fieldset {
padding-top:48px; /*legend height(18px) + top value(15px) + bottom spacing(15px) */
position:relative;
}
legend {
height:18px; /* Default Height of non-styled legend element with default font-size of 16px as tested at time of this posting */
left:15px;
/*margin:15px 0;*/ /* Margins initially trying to achieve */
position:absolute;
top:15px; /* replaces top margin-top:15px; */
}
From the example I provided above, in order to achieve the bottom "margin" on the <legend> tag that you desire, you'll just apply a top padding to the fieldset equal to the amount of top and bottom margin you desire plus the explicit height of the legend tag. This pushes down the <legend>'s siblings down appropriately.
If you haven't explicitly set the height of your legend, you can just check it out in the metric tab of either Firebug or Chrome Developer tools, as the font-size will affect the height of it.
But yeah, pretty simple solution, I just ran into it again a few days ago when working on a client project. Then came across this question, as I was trying to do more research on it today.
Edit: I realized after posting this answer that in my original fix, I applied the padding to a parent <div> of the <fieldset> because for some reason Firefox starts the top:15px; from the bottom of the top padding, when the padding is applied to the <fieldset>. Putting the padding-top and position:relative; on the parent div allowed the <legend> to position absolutely over the padding instead of being pushed down by the padding. I have edited the code above to reflect my findings. This solution which started out simple, is less attractive to me now, but it definitely works. Here is a page that I created, testing two methods of positioning the <legend> tag: Legend tag positioning: http://dl.dropbox.com/u/37971131/css-testing/forms.html
The method proposed by Stephan Muller only works if the HTML element following the is visible. As in my case, this is not always possible without potentially large restructuring of the HTML code. Thus, in addition to his CSS code
legend + * {
-webkit-margin-top-collapse: separate;
margin-top: 10px;
}
just apply the following jQuery command, which basically just inserts an empty div (having a height of 0 px) but now matches the CSS selector adding the margin in every case:
$('legend + *').not(':visible').each(function() {
$('<div></div>').insertBefore($(this));
}
If updating the templates is not possible, you can use this script, just wrap the legend tag inside a div tag
jQuery('legend').each(function() {
jQuery(this).wrap( "<div></div>" );
});
Hope this helps! Enjoy coding..
I have a website design that includes text input fields that look like this:
Input Field http://img401.imageshack.us/img401/4453/picture1ts2.png
I'm wondering what the best solution for creating this input field is.
One idea I have is to always have a div around the input with a background image and all the borders disabled on the input field and specified width in pixels, such as:
<div class="borderedInput"><input type="text" /></div>
I have tried to discourage them from using this format, but they won't be discouraged, so it looks like I'm going to have to do it.
Is this best or is there another way?
--
Trial:
I tried the following:
<style type="text/css">
input.custom {
background-color: #fff;
background:url(/images/input-bkg-w173.gif) no-repeat;
width:173px;
height:28px;
padding:8px 5px 4px 5px;
border:none;
font-size:10px;
}
</style>
<input type="text" class="custom" size="12" />
but in IE (6 & 7) it does the following when you type more than the width:
Over Length http://img240.imageshack.us/img240/1417/picture2kp8.png
I'd do it this way:
<style type="text/css">
div.custom {
background:url(/images/input-bkg-w173.gif) no-repeat;
padding:8px 5px 4px 5px;
}
div.custom input {
background-color: #fff;
border:none;
font-size:10px;
}
</style>
<div class="custom"><input type="text" class="custom" size="12" /></div>
You just have to adjust the padding values so everything fits correctly.
It is - in my eyes- definitely the best solution since in any other case you're working with a whole input field. And the whole input field is - by definition - a box where users can enter text.
If you can rely on JavaScript you could wrap such div-Elements around your input fields programatically.
Edit:
With jQuery you could do it this way:
$( 'input.custom' ).wrap( '<div class="custom"></div>' );
CSS:
div.custom {
background:url(/images/input-bkg-w173.gif) no-repeat;
padding:8px 5px 4px 5px;
}
input.custom {
background-color: #fff;
border:none;
font-size:10px;
}
And your HTML:
<input class="custom" ... />
You don't need the div element, you can assign a background to the input directly.
Edit: Here is the working code. I tested it, but you'll have to adjust it for your needs. As far as I can tell, everything here is needed.
input {
background: #FFF url(test.png) no-repeat bottom right;
width: 120px;
height: 20px;
line-height:20px;
padding:0;
text-indent:3px;
margin:0;
border: none;
overflow:hidden;
}
Edit2: I'm not quite sure why I'm getting downvoted, but this method should work unless you need an image bigger than the input element itself. In that case, you should use the extra div element. However, if the image is the same size as the input, there is no need for the extra markup.
Edit3: Ok, after bobince pointed out a problem, I'm getting a little closer. This will be work in IE6&7 and it's close in FF, but I'm still working on that part.
input {
background: #FFF url(test.png) no-repeat 0px 0px;
background-attachment:fixed;
width: 120px;
height: 20px;
line-height:20px;
padding:0px;
text-indent:3px;
margin:0;
border: none;
}
body>input {
background-position:13px 16px;
}
Edit4: Ok, I think I got it this time, but it requires use of a CSS3 selector, so it won't validate as CSS 2.1.
input {
background: #FFF url(test.png) no-repeat 0px 0px;
background-attachment:fixed;
width: 120px;
height: 20px;
line-height:20px;
padding:0px;
text-indent:3px;
margin:0;
border: none;
}
body>input {
background-position:13px 16px;
}
body>input:enabled {
background-position:9px 10px;
}
body>input will target everything except for IE6, body>input:enabled will target any form elements that aren't disabled for all browsers except for IE 6, 7, & 8. However, because :enabled is a CSS3 selector, it doesn't validate as CSS2.1. I wasn't able to find an appropriate CSS2 selector that would allow me to separate IE7 from the other browsers. If not validating (yet, until the validator switches to CSS3) is a problem for you, then I think your only option is the extra div element.
Have you evaluated using background image like this:
<style type="text/css">
input{
background-color: #AAAAAA;
background-image: url('http://mysite.com/input.gif');
border: 0px;
font-family: verdana;
font-size: 10px;
color: #0000FF;
}
I have done this a few times. I have the background image inside a div and use css to position the input field accordingly.
Have a peek at the following site I created that used this technique and use the code: http://www.ukoffer.com/ (Right hand side Newsletter)
AFAIK, the background scrolling problem can be solved either in Firefox and friends, OR Internet Exploder; but not make everyone happy at once.
I would normally have said to style the input directly, but now that I think of it that div example doesn't sound too bad and should take care of your background image scrolling problem.
In that case you'd set a div as position:relative, and put the input inside it with proper padding and width (or 100% width if padding is 0), background transparent, and put an image on the div.
okoman has gotten the CSS aspect correct. May I suggest using a <label> to improve the semantic structure of the markup?
<label id="for-field-name" for="field-name">
<span class="label-title">Field Name <em class="required">*</em></span>
<input id="field-name" name="field-name" type="text" class="text-input" />
</label>
<style type="text/css">
label, span.label-title { display: block; }
</style>
Not only is this more accessible, but it provides numerous hooks that you can use for any type of DOM manipulation, validation or field-specific styling in the future.
Edit: If you don't want the label title displayed for some reason, you can give it a class of 'accessibility' and set the class to display: none; in the CSS. This will allow screen readers to understand the input but hide it from regular users.
The easiest way to get rid of the overflow without JavaScript is simple:
Create a 3 spans, and set their heights to the height of the
image.
Cut the image into 3 parts, ensuring you cut the image such that
the left and right round parts will be on the 1st and 3rd images
respectively.
Set the background of the 1st span to the image
with the left border, and set it to no-repeat.
Set the background
of the third span to the image with the right border and set it to
no-repeat.
Put the input inside the middle span, remembering to
set its height to the height of the spans, and its background to the
2nd image, and repeat-x only.
That will ensure that the input
will seem to expand horizontally once the input is being filled. No
overlapping, and no JS needed.
HTML
Assuming the image height is 60px, the width of the first and third span is 30px,
<span id="first">nbsp;</span><br />
<span id="second"><input type="text" /></span><br />
<span id="third">nbsp;</span>
CSS
span#first{background:url('firstimage') no-repeat; height:60px; width:30px;}
span#third{background:url('thirdimage') no-repeat; height:60px; width:30px;}
span#second input{background:url('second image') repeat-x; height:60px;}
That should resolve your issue.