经常浏览网站进出论坛,新闻评论的朋友大都看到过这个漂亮的美化的文本域(Textarea)背景。短短几行代码表达的效果却非常的大,让访客不自觉地就能加深对网站的视觉印象,从而更好地做到宣传的目的,也同时美化了单调的文本域(Textarea)背景。
文本域背景美化(添加文本域背景图片)展示效果代码如下:<style type=”text/css”>
<!–
.textfield {width:450px;height:20px;background-image:url(images/inputbg.gif);color:#666;border:1px dotted #999666;padding:3px 0px 0px 5px;} /*设置标题文本框边框,背景图片及文字颜色*/
.textarea {width:450px;height:120px;background:url(images/logo.gif) no-repeat right top;border:1px dotted #999666; } /*设置留言文本框边框,背景图片*/
–>
</style>
<table width=”510″ border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″>
<tr>
<td><input name=”search” type=”text” id=”search” class=”textfield” onfocus=”if(this.value==’标题’) {this.value=”;}this.style.color=’#333′;” onblur=”if(this.value==”) {this.value=’标题’;this.style.color=’#666′;}” value=”标题” maxlength=”22″/></td>
</tr>
<tr>
<td><textarea name=”textarea” class=”textarea”></textarea></td>
</tr>
</table>
分享到:
相关推荐
本文档“表单美化之textarea文本域背景的美化.rar”着重于提升textarea的视觉效果,以增强用户体验。我们将探讨如何利用JavaScript(JS)和其他前端技术来实现这一目标。 首先,textarea的基本样式可以通过CSS进行...
CSS样式主要用于美化文本域,使其看起来更整洁。 ```html <textarea cols="40" rows="1" style="height:25px;" id="text"></textarea> ``` 接下来是JavaScript部分,这部分代码的主要任务是监听`Textarea`上的各种...
例如,使用CSS可以改变文本域的边框、背景色、字体样式等: ```css textarea { border: 1px solid #ccc; /* 边框 */ background-color: #f8f9fa; /* 背景色 */ font-size: 14px; /* 字体大小 */ padding: 10px;...
6. **文本域(`<textarea>`)**:虽然示例中未包含,但通常用于输入较长的文本,比如自我介绍或工作经历。文本域可以容纳多行文本,并可以通过调整`rows`和`cols`属性设置其大小。 7. **表单(`<form>`)**:将这些...
上述代码会将所有输入框、选择框和文本域应用jQuery Uniform的样式。 **3. 自定义样式** jQuery Uniform允许开发者自定义样式,以满足特定的设计需求。可以通过修改`uniform制服.css`中的CSS规则,或者在自己的CSS...
这是一个隐藏的`<div>`元素,其中包含一个空的`<textarea>`文本域。当用户点击“评论”链接后,该文本域将被显示出来,供用户输入评论内容。 #### 四、进一步改进 虽然上述示例代码已经能够实现基本的评论功能,但...
示例中的在线留言表单使用了HTML5的`<form>`元素,结合`<input>`元素创建输入框,以及`<textarea>`元素创建文本域,用户可以填写信息。`<input type="submit">`定义了一个提交按钮,通常会触发JavaScript的表单提交...
3. textarea的美化技巧涉及到了box-sizing属性的使用,并且可以去除右下角的拉伸图标,以便控制文本域的大小。去除轮廓颜色和内边距也是常见的美化步骤。 4. placeholder的字体颜色和大小调整,针对不同浏览器有...
- **表单元素**:输入框(`input`), 文本域(`textarea`), 下拉列表(`select`), 按钮(`button`)等。 - **表单样式**:通过CSS美化表单元素,提高用户体验。 #### 七、浮动布局 - **浮动原理**:元素脱离文档流并移动...
表单可以使用`<form>`、`<input>`(输入框)、`<textarea>`(文本域)和`<button>`(按钮)等元素构建,通过JavaScript处理用户提交的信息。 为了让网站在不同设备上呈现良好效果,需要考虑响应式设计。通过使用...
- **textarea**: 文本域,同样可以通过 CSS 控制其外观。 - **body**: 主体,CSS 中可以使用各种属性来设置 `<body>` 的背景色、字体等。 - **head**: 头部,虽然 `<head>` 本身不直接呈现给用户,但可以使用 CSS ...