如何定义HTML页面输入框内输入的文本的样子?

html-css09

如何定义HTML页面输入框内输入的文本的样子?,第1张

1楼回答的已经很好了。我补充一些要注意的。

1、为了兼容的需要,一般给input定了高度之后(比如:height:20px),还需要设置行高以确保文字垂直居中:line-height:20px 行高必须与高度保持一致。

2、例子: <input type="text" id="text" name="" size=“15” />所示中要注意写size的值,不然文字输入多了或造成溢出。(可能还有别的方式,不过我自己还没尝试过)

3、可以给每一个input定义一个选择器,以方便单独定义样式。

html: <input type="text" id="text" name="" size=“15” />

css: input#text{

color:#f00 /*红色文字*/

width:160px /*定义宽度*/

height:24px/*定义高度*/

line-height:24px/*定义行高,确保垂直居中*/

border:1px solid #dfdfdf /*定义边框,1像素,浅灰色 1楼设的灰色较深,一般不适合,白色背景来说,#dfdfdf的颜色之比较合适 */

font:normal 12px/24px "" /*定义字体,不加粗,12像素字,24像素行距,使用默认字体*/

}

创建一个简单的input标签实现网页上的输入框效果。

添加输入框的步骤如下:

<input>标签用于搜集用户信息。根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

工具:编辑器、浏览器

1、创建一个简单的input标签实现网页上的输入框效果,代码如下:

1 First name: <input type="text" name="fname" />2 Last name: <input type="text" name="lname" />3 <input type="submit" value="Submit" />

2、以上代码中type=text是文本的输入框,type=submit是一个提交按钮,运行的效果如下图:

添加多个输入框的方法如下:

<input id="input_template" name="name" maxlength="7" type="text" style="width: 120px">

<!-- 这里是一个模版,追加的时候用来克隆的。 -->

$('#addBtn').bind('click', function() {

var input_ = $("#input_template").clone()

$("#input_container").append(input_)

})

<!-- 需要注意的是,在追加的时候,或者追加之后,把追加元素imput的name和id重置一下。 -->