I'm using a 4 digits password; the dots that represent each character are too small; I would like to increase the font-size; but I don want to change the input size.
This is what I have:
<input class="pin_code" type="password" maxlength="4"/>
If I add
<input class="pin_code" type="password" maxlength="4" style="font-size:30px"/>
Then the input also increases the size; how can I make only the text/dots to get bigger??
I added
<input class="pin_code" type="password" maxlength="4" style="font-size:30px; height:24px"/>
And now I get this :
I believe that you can't achieve what you want easily. The input text field element seems to be a special element, the height of it will be automatically increased accordingly to the font-size, limiting the height of course will make the middle text line go bottom-wards and look ugly indeed.
To solve this I think we have to clip off the top and bottom part (with an equal distance) and just let the middle part show (together with the text line). To clip off it, we need a wrapper around the input field, position the input field appropriately and set overflow:hidden for the wrapper. Here are the code details:
HTML:
<span class='input-clipper'>
<input class="pin_code" type="password" maxlength="4"/>
</span>
CSS:
.pin_code {
font-size:40px;
position:absolute;
width:100%;
top:50%;
-webkit-transform:translateY(-50%);
left:0;
outline:none;
}
span.input-clipper {
display:inline-block;
position:relative;
height:20px;
width:200px;
overflow:hidden;
border:1px solid black;
}
NOTE: To style the border, you have to style the border of the wrapper (.input-clipper) instead. You also set the size of the wrapper instead of setting the size of the input field (as before). Please test the demo using webkit-based browser (Chrome, Opera) because I just used -webkit- prefix for the transform property. I'm a little lazy to include all the possible prefixes.
Working Demo.
Update: The demo above shows an issue that the caret height fills the whole height of the input, to reduce the caret height, we can use a small trick with :before and :after pseudo-elements. Here is the Updated Demo.
Remaining Issue: You can't style the border of the input in the :focus state with just CSS, of course you can style it if using javascript.
I think there is a high propability that we have a better solution related to font icons or special characters, ... but I'm not good at that part. Hope someone will post it here.
set height for the input and set the font-size. it will work.
css
input{
height:24px;
font-size:32px;
}
http://jsfiddle.net/W4Ver/
Something like this ?
http://jsfiddle.net/t6Cxz/
input[type="password"]
{
font-size:30px;
height:30px;
line-height:30px;
width:50px;
}
Updated fiddle with width: http://jsfiddle.net/t6Cxz/3/
Related
I'm not sure what in the CSS is causing the * to display below the textbox when I add the class tiny to the div
<div class="editor-field tiny required-indicator">
Check out the jsfiddle: https://jsfiddle.net/pfqqmmfn/
If the class tiny is removed then the * display after the textbox like expected. I'm still learning CSS so any help would be great. I know it has to be something simple but I can't find the issue.
Thanks for any help.
I updated your JSFiddle: https://jsfiddle.net/pfqqmmfn/2/
I changed .required-indicator:after (the little asterisk) to this:
.required-indicator:after
{
content: "*";
display:block;
font-weight: bold;
color: Red;
width:20px;
height:20px;
position:absolute;
left:calc(100% + 10px);
top:0;
}
And added position:relative; to your .tiny class.
Relative position to the parent (.tiny) lets me use position:absolute on its :after pseudo-element (which behaves as its child).
You had your asterisk pseudo-element on position:relative; so by giving that item the .tiny class, you set its width to 135px (with !important, too) thus stopping the little asterisk from fitting in there.
If you add this
form div.tiny {
width: 120px !important;
}
it overwrites the built-in rule that causes your problem (making the input field containers too narrow to allow the asteriks next to it). You can try and use different width settings.
https://jsfiddle.net/zLoqy3py/
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 am not sure where you edit the code for my question so I put both (sorry if that confuses anyone)
In the top right hand corner there are two text boxes, but I'm not sure how to make them bigger in height. Please could you help me?
Here is the link to my site so far: http://jsfiddle.net/xiiJaMiiE/4UUgg/1/embedded/result/
#signin
{
position:absolute;
min-width:22%;
height 20%;
top:0%;
right:0%;
z-index:10;
background-color:#CCC;
border: 1px solid grey;
}
#signin input {
background-color:#FFF
}
Sorry to be a pain, but also how do I add text into it? but when the user clicks in the box is disappears?
Thanks for your help!
According to this answer, here is what it says:
In Javascript, you can manipulate DOM CSS properties, for example:
document.getElementById('textboxid').style.height="200px";
document.getElementById('textboxid').style.fontSize="14pt";
If you simply want to specify the height and font size, use CSS or style attributes, e.g.
//in your CSS file or <style> tag
#textboxid
{
height:200px;
font-size:14pt;
}
<!--in your HTML-->
<input id="textboxid" ...>
Or
<input style="height:200px;font-size:14pt;" .....>
If you want to make them a lot bigger, like for multiple lines of input, you may want to use a textarea tag instead of the input tag. This allows you to put in number of rows and columns you want on your textarea without messing with css (e.g. <textarea rows="2" cols="25"></textarea>).
Text areas are resizable by default. If you want to disable that, just use the resize css rule:
#signin textarea {
resize: none;
}
A simple solution to your question about default text that disappears when the user clicks is to use the placeholder attribute. This will work for <input> tags as well.
<textarea rows="2" cols="25" placeholder="This is the default text"></textarea>
This text will disappear when the user enters information rather than when they click, but that is common functionality for this kind of thing.
This will do it:
#signin input {
background-color:#FFF;
min-height:200px;
}
Try this:
#signin input {
background-color:#FFF;
height: 1.5em;
/* or */
line-height: 1.5em;
}
there are many options that would change the height of an input box. padding, font-size, height would all do this. different combinations of these produce taller input boxes with different styles. I suggest just changing the font-size (and font-family for looks) and add some padding to make it even taller and also more appealing. I will give you an example of all three style though:
#signin input {
font-size:20px;
}
OR
#signin input {
padding:10px;
}
OR
#signin input {
height:24px;
}
This is the combination of the three that I recommend:
#signin input {
font-size:20px;font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300;
padding:10px;
}
.textbox {
height: 40px;
}
<div id=signin>
<input type="text" class="textbox" size="25%" height="50"/></br>
<input type="text" class="textbox" size="25%" height="50"/>
Make the font size larger and add height (or line height to the input boxes)
I would not recommend adding those size and height attributes in the HTML as that can be handled by CSS. I have made a class text-box that can be used for multiple input boxes
I have the following two form fields. They have the same width so they should be displayed aligned and they do so except for Google Chrome. In Google Chrome, the textarea has a little more width. Please help me out in fixing it. Thanks
<input name="phone" type="text" id="phone" style=" font-family: Verdana; color:#FFFFFF; font-size: 13px;background-color: #0E0E0F; border: 1px solid #740086; width:385px; margin-bottom:10px;" size="38" value="Phone #" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
<textarea
name="message"
cols="38"
rows="12"
id="message"
style="font-family:Verdana; color:#FFFFFF; font-size:13px; background-color:#0E0E0F; border:1px solid #740086; width:38px; margin-bottom:10px;overflow:hidden;"
onFocus="if(this.value==this.defaultValue)this.value='';"
onBlur="if(this.value=='')this.value=this.defaultValue;">
Message
in the code you posted your text area has a width:38px; did you mean to have width:385px; to match the width of the input field? you may also want to include a reset.css
I suspect that 38px in the style for the textarea element is a typo and should be 385px, otherwise you would the area as narrow on all CSS-enabled browsers. And I suspect that in the real code, there is something that causes a line break between the input and textarea elements; otherwise it is difficult to compare their widths.
The reason why the textarea is slightly wider on Chrome is that by the browser stylesheet for WebKit-based browsers, textarea elements have 2px padding. You can see this if you use the Inspect element tool of Chrome (via right-clicking) and view “Metrics” there.
The apparent solution is then textarea { padding: 0; }. But since the padding is actually useful, it might be better to set
textarea, input { padding: 2px; }
You seem to be sizing the input element using the size attribute and using cols in your textarea.
You also are defining two styles: width:385px and width:38px (the inequality is probably your problem). I'm not sure which takes precidence (size or cols), but why not avoid confusion and just set equal an width for both elements and just remove the size and row/col definitions?
Is there a simple way of getting a HTML textarea and an input type="text" to render with (approximately) equal width (in pixels), that works in different browsers?
A CSS/HTML solution would be brilliant. I would prefer not to have to use Javascript.
Thanks
/Erik
You should be able to use
.mywidth {
width: 100px;
}
<input class="mywidth">
<br>
<textarea class="mywidth"></textarea>
To answer the first question (although it's been answered to death): A CSS width is what you need.
But I wanted to answer Gaius's question in the answers. Gaius, you're problem is that you are setting the width's in em's. This is a good think to do but you need to remember that em's are based on font size. By default an input area and a textarea have different font faces & sizes. So when you are setting the width to 35em, the input area is using the width of it's font and the textarea is using the width of it's font. The text area default font is smaller, therefore the text box is smaller. Either set the width in pixels or points, or ensure that input boxes and textareas have the same font face & size:
.mywidth {
width: 35em;
font-family: Verdana;
font-size: 1em;
}
<input type="text" class="mywidth"/><br/>
<textarea class="mywidth"></textarea>
Hope that helps.
Someone else mentioned this, then deleted it. If you want to style all textareas and text inputs the same way without classes, use the following CSS (does not work in IE6):
input[type=text], textarea { width: 80%; }
This is a CSS question: the width includes the border and padding widths, which have different defaults for INPUT and TEXTAREA in different browsers, so make those the same as well:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>width</title>
<style type="text/css">
textarea, input { padding:2px; border:2px inset #ccc; width:20em; }
</style>
</head>
<body>
<p><input/><br/><textarea></textarea></p>
</body>
</html>
This is described in the Box dimensions section of the CSS specification, which says:
The box width is given by the sum of the left and right margins, border, and padding, and the content width.
Use CSS3 to make textbox and input work the same. See jsFiddle.
.textarea, .textbox {
width: 200px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Yes, there is. Try doing something like this:
<textarea style="width:80%"> </textarea>
<input type="text" style="width:80%" />
Both should equate to the same size. You can do it with absolute sizes (px), relative sizes (em) or percentage sizes.
Just a note - the width is always influenced by something happening on the client side - PHP can't effect those sorts of things.
Setting a common class on the elements and setting a width in CSS is your cleanest bet.
Use a CSS class for width, then place your elements into HTML DIVs, DIVs having the mentioned class.
This way, the layout control overall should be better.
As mentioned in Unequal Html textbox and dropdown width with XHTML 1.0 strict it also depends on your doctype.
I have noticed that when using XHTML 1.0 strict, the difference in width does indeed appear.
input[type="text"] { width: 60%; }
input[type="email"] { width: 60%; }
textarea { width: 60%; }
textarea { height: 40%; }
These days, if you use bootstrap, simply give your input fields the form-control class. Something like:
<label for="display-name">Display name</label>
<input type="text" class="form-control" name="displayname" placeholder="">
<label for="about-me">About me</label>
<textarea class="form-control" rows="5" id="about-me" name="aboutMe"></textarea>
you can also use the following
CSS:
.mywidth{
width:100px;
}
textarea{
width:100px;
}
HTML:
<input class="mywidth" >
<textarea></textarea>