INPUT.smallInput
{
BACKGROUND-COLOR:#FFFFFF
COLOR:#000000
FONT-SIZE:9pt
FONT-WEIGHT:Normal
TEXT-DECORATION:None
FOTN-FAMILY:宋体,verdana,Arial, Helvetica
TEXT-ALIGN:Left
BORDER-TOP:3 Hidden #808080
BORDER-LEFT:3 Hidden #808080
BORDER-RIGHT:3 Hidden #FFFFFF
BORDER-BOTTOM:3 Hidden #FFFFFF
CURSOR:Text
}
</style>
这个css样式是 --单行文本框设置代码--，你可以修改一下做出自己想要的效果 ，然后你的文本框调用这个样式就可以了
可以给标签家个id或class就可以调整文本框的宽和高。
如：
<style type="text/css">
.text1{width:100pxheight:20px}
</style>
<input type="text" class="text1" />
扩展资料：
在CSS中，使用text-align属性控制文本的水平方向的对齐方式：左对齐、居中对齐、右对齐。
该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。通过允许用户代理调整行内容中字母和字之间的间隔，可以支持值 justify；不同用户代理可能会得到不同的结果。
默认值：left if direction is ltr, and right if direction is rtl
继承：yes
版本：CSS1
JavaScript 语法：object.style.textAlign="right"
参考资料来源：百度百科-text-align
placeholder属性能够让你在文本框里显示提示信息，一旦你在文本框里输入了什么信息，提示信息就会隐藏。你以前可能无数次看到这种效果，但那些大部分是用JavaScript里实现的，而现在，HTML5提供了原生支持，而且效果更好！
HTML代码
复制代码
代码如下:
<input type="text" name="first_name" placeholder="你的姓名..." />
你也看见了，需要做的只是在文本框的声明标签上加入placeholder属性。完全不需要JavaScript来创造这种效果。
检查浏览器是否支持Placeholder属性
因为placeholder是一种新属性，很有必要检查一下你的浏览器是否支持它，比如IE6、IE8肯定是不支持的：
复制代码
代码如下:
function hasPlaceholderSupport() {
var input = document.createElement('input')
return ('placeholder' in input)
}
如果用户的浏览器不支持placeholder特征，你需要借助MooTools, Dojo, 或其它JavaScript工具来实现它：
复制代码
代码如下:
/* mootools ftw! */
var firstNameBox = $('first_name'),
message = fi www.hbbz08.com rstNameBox.get('placeholder')
firstNameBox.addEvents({
focus: function() {
if(firstNameBox.value == message) { searchBox.value = ''}
},
blur: function() {
if(firstNameBox.value == '') { searchBox.value = message}
}
})
用CSS美化placeholder
在进一步研究时我发现了另外一个有趣的CSS功能：CSS美化INPUT placeholder效果。下面让我来用简单的CSS代码美化文本框里的placeholder文字。
CSS代码
火狐浏览器里的用法和谷歌浏览器里不太一样。它们的名称都很好理解：
复制代码
代码如下:
/* all */
::-webkit-input-placeholder { color:#f00}
::-moz-placeholder { color:#f00} /* firefox 19+ */
:-ms-input-placeholder { color:#f00} /* ie */
input:-moz-placeholder { color:#f00}
/* individual: webkit */
#field2::-webkit-input-placeholder { color:#00f}
#field3::-webkit-input-placeholder { color:#090background:lightgreentext-transform:uppercase}
#field4::-webkit-input-placeholder { font-style:italictext-decoration:overlineletter-spacing:3pxcolor:#999}
/* individual: mozilla */
#field2::-moz-placeholder { color:#00f}
#field3::-moz-placeholder { color:#090background:lightgreentext-transform:uppercase}
#field4::-moz-placeholder { font-style:italictext-decoration:overlineletter-spacing:3pxcolor:#999}
