css 定义input文本输入框样式

 

 这是一张效果图片，我们下面来看看input的源码html代码吧。

 代码如下 复制代码

<div id="comment">
     <form id="commentform" method="post" action="post.php" enctype="multipart/form-data">
     
      <div id="input" >
         <label class="name" for="email"></label>
         昵称：
         <input  name="username" type="text" class="msginput" id="usernamecontent" value="" size="20" maxlength="30"  />
      </div>
       <div id="input" >
         <label class="email" for="email"></label>
         邮件地址：<input  name="email" type="text" class="msginput" id="useremailcontent" value="" size="20" maxlength="30"  />
      </div>   
        
                                我想对泸州说：<textarea id="commentarea" class="msginput" name="content" ></textarea><br/>
                                <input type="submit" value="提交" class="msgsubmit" />
     </form>
   </div>

哈哈，好像没有什么区别哦，那我们要告诉你区别就是id哦。

 代码如下 复制代码

.msginput{
width:300px;
border:none;
background:#432914;
margin:0 0 0 30px;
background:url(images/line.jpg) no-repeat bottom left;
color:#f5e2ca;
}

#input{

height:40px;
}
#commentarea{
height:100px;
overflow:auto;
}
.msgsubmit{
float:right;
border:none;
background:#8d653a;
height:28px;
width:54px;
margin:20px 60px  0 0px;
}
#commentname{
line-height:30px;
padding:0 0 0 15px;
color:#432914;
background:url(images/nameback.jpg) no-repeat top left;
height:36px;
width:90px;
display:block;
}

仔细看看吧，本站原创转载注明www.111cn.net

时间： 2024-09-23 04:54:58

css 定义input文本输入框样式的相关文章

css 入门教程:css控制input与bottn样式

哈哈今天我们来看看,css 入门教程:css控制文本输入框与按钮的css样式,好了我们先来看看效果图. 现在看到了我的文本输入框是不是淡色的背景与边框哦.现在来看看我们下面是怎么实现的吧.  <p align="center"><input name="" type="submit" class="btn" value="提交"></p>     <p align=

css定义div里面class样式

好了下面我们就来看一个例子吧. .top_menu{ background-color:#3399cc; text-align:left; height:18px; margin-top:1px; margin-bottom:6px; padding-top:6px; padding-bottom:4px; padding-left:2px;} .top_menu a,.top_menu a:visited{padding-left:2px; color:#000000;} 现在我们看到的是类t

js 调用多input文本输入框代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

css美化input文本框实现代码

提示:您可以先修改部分代码再运行 搜索: 评论: 边框: 提示:您可以先修改部分代码再运行

谷歌浏览器记住密码后input输入框样式问题

问题描述 谷歌浏览器记住密码后input输入框样式问题 1.正确的情况如下图 正确显示的情况的效果图如下: 2.输入用户名和密码后点击登录 输入用户名和密码后点击登录:谷歌浏览器会弹出一个对话框:对话框如下图对话框提示内容是"希望Google Chome保存您在此网站上使用的密码吗?",点击按钮"保存密码"后:注销在次登录. 3.input的输入框样式倍改变 注销再次登录后的登录页面input输入框样式改变了:改变的效果如下图 4.检查代码 打开控制台发现谷歌浏览器

用CSS美化input file按钮的方法

我们在做表单的情况下,input.textarea.button的样式比较容易定义,select和input file的样式难以定义. input file在系统默认下的外观: 我们最多通过定义input的border来改变系统默认的外观: 如果要让浏览按钮更漂亮一点,我们想定义它的背景颜色,甚至想用背景图片来代替,通过css定义input flie还真是办不到的.偶然看到一篇文章:input file 文件选择框美化 作者是把系统默认的按钮设置透明度为0,再定义一个label标签样式,来覆盖透

用CSS控制输入框input悬停交互样式

制作表单的时候,实现鼠标悬停交互效果有多种方法: 1.在xhtml中直接写入onmouseover.onmouseout脚本就可以实现了,但这样就违背了web标准所倡导的内容.表现相分离的原则.以后若要对此进行修改也将会很繁琐.这样直接写入xhtml也会让页面代码增加,如果只是一个input输入框或许是无所谓的,如果是几十个几百个,增加的字节数就很宠大了. 2.在xhtml中加入小脚本,鼠标经过时可以切换CSS.具体内容请看这篇文章.虽然实现了内容.表现相分离,以后的修改也会很方便.但同样会让页

css文本输入框:CSS给文本输入框添加背景图像

  <title>给文本输入框添加背景 - www.cxybl.com</title> <STYLE TYPE="TEXT/CSS"> .bg { background-image:url(bgdemo2.jpg); /*如果想添加你的网站Logo,可将这两行注释启用 background-repeat: no-repeat; background-position: center center; */ } </STYLE> </h

实例学习：网页中用CSS定义＜li＞和＜hr＞的样式

css|网页 本来之前我打算写表现本文主题的文章,但最近在新浪博客群中看到了这篇文章,就不用我多费心血了,这里转载过来,希望对大家有所帮助. li {list-style-image: url(images/disc.gif);} li的这个样式定义是将列表项目使用图片来代替显示的小圆点.当然您也可以显示成其它效果,详细请参阅下面的定义: 列表项目效果的CSS定义 *list-style-type: circle(可换成自己想要的样式); 列表项目样式 disc : CSS1 实心圆 circl