I'm currently working with a textbox that has a background. I was wondering if it's possible to center text (vertically) inside the textbox.
important: it's perfectly centered in firefox. Only IE it writes it too high for some reason. I've tried line-height, padding, and margin. Nothing works. Any ideas?
EDIT: This is my current CSS. I should say that I've tried the margin-top method and it didn't work for me. Also, as I mentioned, this is only for IE. I have IE specific style sheets so no worries.
.textValue { color: black; font-size: 12px; font-family: David, sans-serif; }
input { width: 110px; padding: 0 2px; padding-right: 4px; height: 20px; border: solid 1px white; margin-bottom: 0px; background: url(../images/contactTextBg.png) no-repeat top right; }
label { float: right; margin-left: 5px; font-size: 13px; }
For IE, I have the following:
.textValue { font-size: 14px; }
as for HTML:
<tr>
<td><label for="name">name</label></td>
<td><input type="text" name="name" id="name" class="textValue" value="" /></td>
</tr>
Thanks,
Amit
I wonder how you are able to align the text in a textbox but since you say, here is the suggestion:
For idiot IE, you can use this IE specific hack:
margin-top:50px; /* for standard-compliant browsers */
*margin-top:50px; /* for idiot IE */
_margin-top:50px; /* for idiot IE */
You might want to try other similar properties if you want rather than margin-top.
Did you try?:
input {vertical-align: middle;}
I know this one's a bit old, but I've just run into the same problem. The solution given here didn't help me which seemed strange. In my case it was the line height that was set to "1em". Changing the line height to something that resembled the height of the text box, rather than the size of the font it contained was the solution. This also continues to function as expected in Firefox, etc.
Related
I'm working on a drag and drop field for files and so far I have been able to style it however I wish. Except I need to somehow add text that says 'drag and drop' inside the area. I'm not really sure how to accomplish this.
I have tried adding content:'drag and drop';
And I have tried a background image, but it was not scalable and not something that I believe is the right solution.
my html looks like this
<input type="file" class="form-control" name="uploadCover" value="" />
and my css looks like this
input[type="file"]{
padding-bottom: 4em;
padding-top: 2em;
width: 100%;
border: 1px dashed #000;
}
input[type="file"]:hover{
border: 1px dashed #67a5c5;
}
and the field looks like this...ignore the ugly yellow!
Any help or ideas would be wonderful! I'm really trying to avoid javascript.
How about this for a starting point? It uses a :after pseudo element, so that the content you're adding follows the control itself.
It is "centre aligned" (using margin auto 50%) to avoid overlapping the filename text, but you'll probably need add some more CSS to make sure this doesn't happen on your web page.
input[type="file"]:after {
content: "Drag and drop";
display: block;
min-width: 20em;
margin: auto 50%;
}
http://jsfiddle.net/jrG7v/
Edit: as pointed out this only works in Chrome. No text is displayed in Firefox, and IE11 (seems I've been upgraded since I last used IE10) still displays the text-style input box. Hopefully somebody else has a better answer.
For compatibility with browsers, I'd go with:
<div>
<input type="file" class="form-control" name="uploadCover" value="" />
<div class="drag">Drag and Drop</div>
</div>
div.drag { min-width: 100px; margin-top: -25px; padding-left: 10px; font-family: arial; font-size: 12px;}
Fiddle:
http://jsfiddle.net/jrG7v/3/
I have an input (that holds a number) that I want to put a button next to. This button would, when pressed, increment the value in the box by 1.
I am having a heck of a time lining it up in all browsers though.
I've tried using button, img, and a to accomplish this. img does not line up properly in most of the browsers. Meaning that if I put an input and an img next to each other, the img is a few pixels higher than the input, but that varies by browser. The closest i can get is by making it a button that is styled with css to use my custom image. It works in Chrome, ie7, and ie10. However, in ie8, ie9, and firefox, it is 1 pixel too high, and I can't for the life of me get them to line up.
I read here that floating would make them line up. Sure enough, it did. But now the input and the button are jammed against the edge of the td they're in, and I can't figure out how to move them. Is there perhaps a better method than float? Or just a way to line them up properly?
This is how it is where I am having issues. In Chrome and ie7, ie10 it works fine. It messes up in ie8,9 and firefox.
This is how it looks with floats. It displays right in all the above browsers, but it is now off-center.
Any suggestions?
OK. Here is one way. So I think you might like vertical-align: middle; It only works on inline and inline block elements aligning them to each other. So it's not aligning them inside a box. I made a little sandbox to test your issues HERE. I'm not sure of your constraints, but I use box-sizing: border-box; on most everything these days - So that is something to beware of when looking at the code. I checked it in browser-stack and all seems well for the most part. This is always a difficult task in my experience. I kept to the key points in the CSS below, but there is a bunch of comments and styles and stuff in the codepen. I hope this helps! Good luck!
HTML
<div class="wrapper">
<input class="your-input" type="number" /><button class="your-button">+</button>
</div>
CSS
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.wrapper {
float: left;
height: 4em; /* needs to be defined in this case so that the children know what they should be 100% height of */
/* just for show */
background-color: lightgray;
border: 1px solid red;
padding: .5em;
}
.your-input, .your-button {
display: inline-block;
/* aligned to each other and not the .wrapper */
height: 100%;
/* already was inline by dephault - but just to be clear */
vertical-align: middle;
}
.your-input {
margin: 0;
padding: 0;
width: 20em; /* arbitrary */
text-indent: 1em;
border: 1px solid black;
}
.your-button{
/* whatevers */
background: lightblue;
border: 1px solid black;
border-left: 0;
width: 6em;
border-radius: 0 10px 10px 0;
cursor: pointer;
}
You might want to consider using the bootstrap libraries. See "Prepended and appended inputs" here. They do a great job with browser compatibility. You can further refine the l&f, so that it better matches what you have in your examples.
I came up with a method that fixes my issue, but only for ie8+ which is satisfactory for me.
The structure looks like this:
<input class="add_input" type="text" name="qty" value="0" /><a class="add">
<img src="plus.png"/>
</a>
There cannot be a space or new line between the input and the a or else it will misalign them. The image is simply the "+" by itself, nothing else. Then I use CSS to style the image into the shape I want, with the appropriate :hover and :active selectors.
Here's the CSS:
.add_input{
width:28px;
height:18px;
padding:1px 0;
display:inline-block;
text-align:center;
border:1px solid #0a1c40;
border-right:0;
vertical-align:bottom;
}
.add img{
background:url(add.png);
display:inline-block;
width:18px;
height:20px;
border:1px solid #0b1e45;
border-radius:0px 12px 12px 0px;
vertical-align:bottom;
}
.add img:hover {
background:url(add_hover.png);
}
.add img:active {
background:url(add_active.png);
}
I'm note sure if other vertical-align types would work or not, I just know bottom does.
Here's a jsFiddle with my situation demoed: http://jsfiddle.net/SFrbZ/4/
Basically, I want to have input fields in table cells and have the inputs set to a fixed height and font-size. What's happening now is that users are able to hover over or click on the input and using the mouse wheel can scroll the text up and partially out of frame. Highlighting the text also allows you to move it up. The following code shows the barebones of this issue as well:
HTML:
<input class="scroll" type="text" value="1"></input>
CSS:
.scroll {
display: table-cell;
width: 38px;
height: 8px;
font-size: 11px;
color: Black;
font-family: Calibri;
text-align: center;
background-color: rgb(182, 231, 201);
}
Oddly enough, this is only occuring on Firefox and not Chrome, IE, or Safari. As you can see in the jsFiddle, increasing the height of the field (or lowering the font-size) solves the problem, but this is not a viable solution for me.
I've tried a number of alterations in an attempt to fix it but have come up dry. Messing with overflow, line-height, padding, margins, display type, etc. and nothing seemed to do the trick. Any pointers or suggestions would be greatly appreciated!
Your best option is probably to install a Javascript handler for scroll events, on elements of class .scroll, which simply swallows the event and returns false -- this will prevent the element from being scrolled by any means, which should solve the problem as stated. This fiddle, using jQuery, demonstrates the solution, and the meat of it is as follows:
$(document).ready(function() {
$('.scroll').scroll(function(e) {
e.preventDefault();
return false;
});
});
Without jQuery, the solution is still feasible by means of window.addEventListener &c., but jQuery makes it so much simpler that, if you're not already using that library in your project, I'd recommend adding it just for this purpose.
The easiest solution is to change the line-height property of the .scroll css class to match the height. Using you're example:
.scroll {
display: table-cell;
width: 38px;
height: 8px;
line-height: 8px;
font-size: 11px;
color: Black;
font-family: Calibri;
text-align: center;
background-color: rgb(182, 231, 201);
}
The issue is that the text technically doesn't fit in that box. Text with a height of 11px usually has a couple of pixels on top and bottom as 'padding' to make it so that multi-line text has spacing between the lines. As a result, it appears the text fits, but it doesn't actually.
I have the following css and html (drilled down to the essentials. The full code with additional styles can be found here: I have this css I pasted on jsfiddle: http://jsfiddle.net/BwhvX/ , this is however enough to reproduce the problem)
css:
* {
margin: 0px;
padding: 0px;
font-size: 13px;
line-height: 15px;
border: none;
}
input[type="submit"]::-moz-focus-inner {
border: 0;
}
#search .text, #search .button {
border: 1px solid red;
}
html:
<form method="post" id="search" action="">
<p><input type="text" class="text" value="" name="suche"><input type="submit" class="button" value="Suchen"></p>
</form>
this is how firefox renders:
this is how chrome renders:
i want the two form elements to have the same height in all browsers. looks to me like some default style is applied, that i manually need to reset like i did for firefox in this example.
in chrome developer tools one has height 16 and one height 17 px but i am not able to see where it comes from, its just calculated. the applied styles (that are shown to me) are the same.
change:
*{
line-height: normal !important;
}
or add something like:
input[type="submit"], input[type="text"] {
line-height:normal !important;
}
don't ask why)
and. safari need special fixes. but looks well
I found this in normalize.css that solved it for me:
// Removes inner padding and border in Firefox 4+.
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
Try By giving
.text{
border:0px;
}
Usually one of these below has worked for me in the past using firefox browser.
vertical-align: bottom;
vertical-align: top;
If you specify height instead of line-height, they will render correctly. height behaves well cross-browser; line-height does not.
Had the same issue with firefox, setting line-height:normal didn’t help. Setting identitcal padding values on both, the input and button element, helped me out.
CSS3 has the box-sizing property. Setting it's value to border-box, you tell the browser that the element's border-width and padding should be included into element's height, and then may easily set the height itself:
input {
box-sizing: border-box;
height: 15px;
}
This works for html select elements as well.
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.