How do you increase the height of an textbox? (along with its font size)
I'm assuming from the way you worded the question that you want to change the size after the page has rendered?
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;" .....>
Note that if you want a multi line text box you have to use a <textarea> instead of an <input type="text">.
Increasing the font size on a text box will usually expand its size automatically.
<input type="text" style="font-size:16pt;">
If you want to set a height that is not proportional to the font size, I would recommend using something like the following. This prevents browsers like IE from rendering the text inside at the top rather than vertically centered.
.form-text{
padding:15px 0;
}
<input type="text" style="font-size:xxpt;height:xxpx">
Just replace "xx" with whatever values you wish.
With inline style:
<input type="text" style="font-size: 18pt; height: 40px; width:280px; ">
or with apart CSS:
HTML:
<input type="text" id="txtbox">
CSS:
#txtbox {
font-size: 18pt;
height: 42px;
width : 300px;
}
If you want multiple lines consider this:
<textarea rows="2"></textarea>
Specify rows as needed.
Don't the height and font-size CSS properties work for you ?
Use CSS:
<html>
<head>
<style>
.Large
{
font-size: 16pt;
height: 50px;
}
</style>
<body>
<input type="text" class="Large">
</body>
</html>
Related
So I have an input tag in HTML, and I need to decrease its width to (let's just say) 80% of its normal width. I've tried setting width:80% but that didn't work. I would prefer solutions using only HTML/CSS, but I'm open to anything. My Google searches came up with results to change the width to a fixed amount like 50 pixels, not relative to its normal width. Thanks!
<input id="myInput" type="text">
First, get the current input width (myInputWidth). Multiply it by some factor (0.8). Then modify the width.
var myInputWidth = (document.getElementById("myInput").offsetWidth);
document.getElementById("myInput").style.width = myInputWidth * 0.8 + "px";
You can check out an example of this here.
Pretty simple with CSS. Check this out!
.input-box{
width:100px
}
<input id="myInput" class="input-box" type="text">
This is what you want hope this helps you.
Regards.
You can place your input element in a container, set a width of said container and then modify the width of the input in percentages.
#input {
width: calc(0.8 * 500px); /* 80% = 0.8 && 500px is the input element's initial width. Just for example I took 500px */
}
<input type="text" id="input">
If you are going to do this for one input box only then you can add Inline Css
<input type="text" id="input" style="width:100px">
You need a block element around.
For example:
<div class="myBox">
<input class="myInput" type="text">
</div>
.myBox {
display: block;
width: 100px;
}
.myInput {
width: 80%;
}
This method your input take 80% width of your parent item (div, myBox).
Let's say I have an input field and I make its height:25px. If I increase the font-size inside that text field, although the box size is constant, it appears as it I added a whole lot of padding. When the font size is normal, it looks something like this:
BEFORE
But now when I increase the size of the font, it looks something like extra padding added something this:
AFTER
However, the padding is unchanged when I debug. I tried adding the box-sizing:border-box, but still it is unchanged. I would really appreciate if someone can help me. Thanks.
A simple demonstration can be achieved by just changing the size of the font-size.
<body>
<div>
<input type="text" value="HI"/>
<input type="text" value="HELLO" style="font-size: 900px; height: 30px; width: 100%;"/>
<input type="text" value="HI"/>
</div>
</body>
You can reset the vertical-align propertie .
Defaut is baseline , line- height is equal to font-size if not reset.
example with vertical-align: (added text and reduced some value from your funny example ;) )
input {
vertical-align:middle;
}
/* see div middle center. Notice: the tallest input gives the line-height on the line it stands */
div {
background:linear-gradient(to top,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0.1) 50%) ,linear-gradient(to left,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0.1) 50%);
<div>
<input type="text" value="HI"/> text
<input type="text" value="HELLO" style="font-size: 90px; height: 30px; width:50px;"/> text
<input type="text" value="HI"/>
</div>
I have this page with 1st row having 2 text boxes and 2nd row having a text box. I want to make their width same, the
below code works fine in chrome, but in firefox and IE (tested in IE9) width are different. How can I make the width same
in all browsers?
JS Bin
<!doctype html>
<html>
<body>
<form>
<input type="text" name="cnop" size="2"/><input type="text" name="cno" style="width:122px;"/><br>
<input type="text" name="cpono"/>
</form>
</body>
</html>
Chrome
Firefox
You can use box-sizing: border-box; to make alignment of input widths easier cross browser (it takes into account the padding, border, and content widths). It also makes calculations of widths in a pre-processor like Sass really simple.
input[type="text"] {
box-sizing: border-box;
}
input[name="cnop"] {
width: 33px;
}
input[name="cno"] {
width: 122px;
}
input[name="cpono"] {
width: 155px;
}
Check the fiddle: https://jsfiddle.net/mshtacea/
You can assign a width to all the 3 input tag, it is sufficient that the sum of the first two is equal to the value of the third. You must also reset the browser's input default styles.
<!doctype html>
<html>
<body>
<form>
<input type="text" name="cnop" style="width:30px;border:0;margin:0;padding:0"/><input type="text" name="cno" style="width:122px;border:0;margin:0;padding:0"/><br>
<input type="text" name="cpono" style="width:152px;border:0;margin:0;padding:0"/>
</form>
</body>
</html>
If you use the box-sizing attribute, set a fixed width on your form and percentage widths on your form inputs, everything should align nicely.
<form style="width: 200px;">
<input type="text" name="cnop" size="2" style="width: 25%;box-sizing: border-box;"><input type="text" name="cno" style="width: 75%;box-sizing: border-box;"><br>
<input type="text" name="cpono" style="width: 100%;box-sizing: border-box;">
</form>
Obviously it's best to put these style attributes into a style tag or your stylesheet but this is a cut and dry example of the solution.
You are better off using CSS to format your controls.
<form>
<div class="container">
<input type="text" name="cnop" class="input1"/>
<input type="text" name="cno" class="input2"/>
</div>
<div class="container">
<input type="text" name="cpono"/>
</div>
</form>
In a style sheet, add these classes
div.container {
display: block;
width: 200px; /* or whatever overall width you need */
}
div.container input {
width: 100%;
}
div.container .input1 {
width: 30px; /* or whatever width or percentage you need */
}
div.container .input2 {
width: 170px; /* or whatever width or percentage you need */
}
HTML
<!DOCTYPE html>
<html>
<head>
<title>Learning</title>
</head>
<body>
...
<h1>Testing</h1>
<span class="error">* Required</span>
<form name="SignUp" method="post" action="">
<fieldset>
<div>
<label>Name:</label><input id="NAME" type="text" name="name" placeholder="Name" required>
</div>
<div>
<label>Email:</label><input id="EMAIL" type="email" name="email" required>
</div>
<div>
<label></label><input type="submit" value="Send" >
</div>
</fieldset>
</form>
</body>
</html>
CSS
body {
background-color:#b0c4de;
font-family:"Times New Roman";
font-size:15px;
}
p {color:blue;}
.error {color: #FF0000;}
label {
display: inline-block;
width: 150px;
text-align: right;
margin-right:30px; //How far the label element and input box
margin-top:100px;
}
fieldset{
//border:none;
padding:15px;
width:500px;
margin:0px auto;
}
The Name: and input box are on one line and the next line is just touching it.
how do i put them apart.
Add a line-height to the div like below:
div{
line-height: 30px;
}
Fiddle
Note: Here, I have applied the property for div tag in general as it is only an example. In actual case, you might want to add a class for the div tags within the fieldset and apply the line-height only for that class. Doing it that way will make sure other div tags in the page aren't affected.
without getting too complicated, something simple as the following will produce the desired results
#NAME, #EMAIL, input[type=submit] {
margin-top:5px;
}
this gives your input fields a small space above so that they are spread out.
Note: I have used specific selectors to apply these values to the fields in your example only.
add below css to your code
div{
margin-top:10px;
}
you can change margin as your requirement.
There are many ways to implement this.
The simplest way is simply to insert a < BR > between label and the input tag.
A second way is to use a table and place the input in the cell below.
An alternative way is to use for example divs and place the label in one div and the input in another and use css techniques like float etc. This has the advantage of controlling everything via css.
How can I change the font size of text inside the textbox in html.
For a <input type='text'> element:
input { font-size: 18px; }
or for a <textarea>:
textarea { font-size: 18px; }
or for a <select>:
select { font-size: 18px; }
you get the drift.
To actually do it in HTML with inline CSS (not with an external CSS style sheet)
<input type="text" style="font-size: 44pt">
A lot of people would consider putting the style right into the html like this to be poor form. However, I frequently make extreeemly simple web pages for my own use that don't even have a <html> or <body> tag, and such is appropriate there.
Here are some ways to edit the text and the size of the box:
rows="insertNumber"
cols="insertNumber"
style="font-size:12pt"
Example:
<textarea rows="5" cols="30" style="font-size: 12pt" id="myText">Enter
Text Here</textarea>