I have this code :
<input type="text" class="contactInput" value="my string">
.contactInput
{
border:0;
margin:0;
padding:0;
background-color:#000000;
color:#ffffff;
height:22px;
width:290px;
padding-left:5px;
}
and I'd like to vertical-align it. Firefox and Chrome do it automatically (as IE9). With IE8 or 7 is in the top.
How can I do it with CSS?
Assuming you mean vertically align in the centre, you can use the line-height CSS property to do this. Simply set it to be the same as the height of the element.
There is a problem with line-height in Chrome. When inline-height == height then chrome on picking edit box displays large cursor. When you start typing cursor decreases. Possible solution is to use paddings (top & bottom). In your case:
height: 18px;
padding-top: 4px;
For webkit, its better to use paddings to avoid giant cursor, like that.
line-height: 14px/*to enclose 13px font, override this if needed*/;
height: 14px/*to enclose 13px font, override this if needed*/;
/*Padding is needed to avoid giant cursor in webkit, which we get if
height = line-height = 22px.*/
padding: 6px 8px;
Related
I try to make a span look consistent between Firefox and Chrome browsers.
Chrome always seems to add a little extra whitespace at the bottom of the text in the span. Firefox does not.
My code:
<span style="line-height:22px; padding: 0px; margin:0px; border-radius: 3px;
vertical-align:middle; background-color: #cc0000; color: #fff; font-size: 22px;">
100%</span>
Try it on https://jsfiddle.net/j904g5fn/3/
You'll see that in the current version of Chrome, there is a little space under the text, which I can't remove by using padding, margin, line-height or vertical-align settings. Firefox does seem to display the span correctly.
How do I remove that extra space?
The three attempts (jsfiddle,inline-block,line-height 18)
The first answer shows the same problem in incognito modus. (there is a little more margin in total, but still more on the bottom)
The second answer:
Could it be a specific issue of Chrome on Linux? (v 68.0.3440.84)
Since <span> is not a block element by default, add display:inline-block; to make it work.
<span style="line-height:22px; padding: 0px; margin:0px; border-radius: 3px; vertical-align:middle; background-color: #cc0000; color: #fff; font-size: 22px; display:inline-block;">100%</span>
The problem is that you need to define the element as a type of block (such as inline-block) to accept margins and paddings, as well as the line-height being the same as the font size, which adds some additional spacing based on the glyph rendering of the font. By setting line-height to 0.75, you are specifying a unitless value, allowing it to scale up and down based on font size without affecting the spacing of the text within the box.
<span style="display:inline-block; line-height:0.75; border-radius: 3px; background-color: #cc0000; color: #fff; font-size: 28px;">100%</span>
I have an input of type search that I am trying to resize the height of. The height is never actually reflected unless I apply a border to the element. I have tried using line-height, font-size, min-height,max-height, and the height attribute on the element itself, nothing seems to work. Is there any way to resize the search box without applying a border?
#search{
display:block;
width:90%;
margin:10px auto 0;
height:50px;
}
#searchborder{
display:block;
width:90%;
margin:10px auto 0;
height:50px;
border:1px solid black;
}
<input id="search" type="search">
<input id="searchborder" type="search">
Update
So after checking on a Windows Machine it seems like the search input is rendering properly, for reference here is what I'm seeing on my Mac.
Any way to make this render properly on OSX?
Much of the time these two CSS/HTML snippets alone function the exact same and have height applied. The only difference is you can see the border on the #searchborder input.
However, search inputs can be rendered differently in different OS and Browsers. Webkit can be tricky with OSX. See the following article about styling CSS search inputs:
https://css-tricks.com/webkit-html5-search-inputs/
A suggestion at the bottom of that page would be to remove the webkit appearance by adding a CSS line and then the height will be applied:
#search{
-webkit-appearance: none;
display:block;
width:90%;
margin:10px auto 0;
height:50px;}
I have the following padding: padding:12px 24px; for input button and label for checkbox.
Font is set in body 16px Arial, all other font sizes inherited. border:0; for all elements. Why do browsers add 1px to button's height? So if label's height is 42px - button's height is 43px. This happens in Chrome and Firefox.
How to make the same height for buttons and labels?
Part of code
<input type='checkbox' name='remember' id="remember"/><label for="remember" >Remember me</label>
<input type='submit' value='Sign in' id='signin-button' /> (in the HTML form)
Try adding line-height: 17px; , sorry if you have already tried line height.
Not sure, but it probably comes down to line-heights of the fonts and how they're handled in different elements in HTML.
Try forcing a height with CSS like so:
#signin-button { height: 42px!important; border: none!important; overflow: hidden; }
I'm usually against setting exact heights for elements as a general rule, but for this case, it might just do the job and be appropriate.
Good luck.
I've been having trouble setting a textarea element's width and using padding via CSS. The padding value seems to change the width of the textarea, which I'd rather it not do.
This is my HTML code:
<div id="body">
<textarea id="editor"></textarea>
</div>
And my CSS code:
#body {
height:100%;
width:100%;
display:block;
}
#editor {
height:100%;
width:100%;
display:block;
padding-left:350px;
padding-right:350px;
}
However, the padding values do not appear to work as one would expect. The width of the textarea is increased by 350px in both directions, rather than defining space between the borders of the element and its content.
I've considered just centering the textarea by setting the margins at "0px auto", but I would like the user to still be able to scroll through the textarea if the mouse is hovering over one of the empty margins. For the same reason I can't add another div to act as a wrapper, as the user wouldn't be able to scroll along the empty areas but only along the margin-less textarea.
Can anybody help?
The CSS box model defines "width" as the width of the content, excluding border, padding and margin.
Fortunately, CSS3 has a new box-sizing property that lets you modify this behaviour to instead include padding etc. in the specified width using:
box-sizing: border-box;
According to the link above, most modern browsers (including IE >= 8) support this property, but they have different names in each browser.
Specifying widths and margins/padding in '%' helps.
Here is one example -
Live # http://jsfiddle.net/ninadpachpute/V2aaa/embedded/result
#body {
background-color:#ccc;
height:100%;
width:100%;
display:block;
}
textarea#editor {
border:none;
width:80%;
height:100%;
margin-left:10%;
margin-right:10%;
}
The width specified by CSS does not include padding or border (in accordance with W3C specifications). I guess one way of doing it is with some JavaScript that sets the width of #editor to the width of #body minus 700px, but that's a bit messy... Not sure if there's a CSS way of doing what you want here. Of course, you could use margin then register the onMouseWheel event to the #body and work with that...
Some browsers allow you to target the placeholder for changing the color etc., so you can add padding as well:
::-webkit-input-placeholder { /* WebKit browsers */
padding: 5px 0 0 5px;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
padding: 5px 0 0 5px;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
padding: 5px 0 0 5px;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
padding: 5px 0 0 5px;
}
Just add a simple border:
border-bottom: 1em solid white;
Feel free to use the desired color and size. You could also use border-top, border-left, border-right or just use border. To make it act like padding, just make sure that you add the same color as the background-color
.parent, textarea{
width:100%;
}
.parent{
display:flex;
}
textarea{
border:1em solid black;
}
<div class='parent'>
<textarea rows="5"></textarea>
</div>
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.