`

文本域(Textarea)背景的美化

    博客分类:
  • CSS
CSS 
阅读更多

经常浏览网站进出论坛,新闻评论的朋友大都看到过这个漂亮的美化的文本域(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文本域背景的美化.rar”着重于提升textarea的视觉效果,以增强用户体验。我们将探讨如何利用JavaScript(JS)和其他前端技术来实现这一目标。 首先,textarea的基本样式可以通过CSS进行...

    Textarea根据内容自适应高度

    CSS样式主要用于美化文本域,使其看起来更整洁。 ```html &lt;textarea cols="40" rows="1" style="height:25px;" id="text"&gt;&lt;/textarea&gt; ``` 接下来是JavaScript部分,这部分代码的主要任务是监听`Textarea`上的各种...

    html css4.rar_html

    例如,使用CSS可以改变文本域的边框、背景色、字体样式等: ```css textarea { border: 1px solid #ccc; /* 边框 */ background-color: #f8f9fa; /* 背景色 */ font-size: 14px; /* 字体大小 */ padding: 10px;...

    个人简介模版

    6. **文本域(`&lt;textarea&gt;`)**:虽然示例中未包含,但通常用于输入较长的文本,比如自我介绍或工作经历。文本域可以容纳多行文本,并可以通过调整`rows`和`cols`属性设置其大小。 7. **表单(`&lt;form&gt;`)**:将这些...

    Jquery uniform

    上述代码会将所有输入框、选择框和文本域应用jQuery Uniform的样式。 **3. 自定义样式** jQuery Uniform允许开发者自定义样式,以满足特定的设计需求。可以通过修改`uniform制服.css`中的CSS规则,或者在自己的CSS...

    javascript功能代码

    这是一个隐藏的`&lt;div&gt;`元素,其中包含一个空的`&lt;textarea&gt;`文本域。当用户点击“评论”链接后,该文本域将被显示出来,供用户输入评论内容。 #### 四、进一步改进 虽然上述示例代码已经能够实现基本的评论功能,但...

    网页设计作业成品文档(HTML+CSS+JS).docx

    示例中的在线留言表单使用了HTML5的`&lt;form&gt;`元素,结合`&lt;input&gt;`元素创建输入框,以及`&lt;textarea&gt;`元素创建文本域,用户可以填写信息。`&lt;input type="submit"&gt;`定义了一个提交按钮,通常会触发JavaScript的表单提交...

    网页制作时可以拿起就用的小技巧总结

    3. textarea的美化技巧涉及到了box-sizing属性的使用,并且可以去除右下角的拉伸图标,以便控制文本域的大小。去除轮廓颜色和内边距也是常见的美化步骤。 4. placeholder的字体颜色和大小调整,针对不同浏览器有...

    CSS3秘笈 第3版 戴维·索耶·麦克法兰著 完整版PDF

    - **表单元素**:输入框(`input`), 文本域(`textarea`), 下拉列表(`select`), 按钮(`button`)等。 - **表单样式**:通过CSS美化表单元素,提高用户体验。 #### 七、浮动布局 - **浮动原理**:元素脱离文档流并移动...

    网站:团队网站

    表单可以使用`&lt;form&gt;`、`&lt;input&gt;`(输入框)、`&lt;textarea&gt;`(文本域)和`&lt;button&gt;`(按钮)等元素构建,通过JavaScript处理用户提交的信息。 为了让网站在不同设备上呈现良好效果,需要考虑响应式设计。通过使用...

    html前端必须掌握的单词

    - **textarea**: 文本域,同样可以通过 CSS 控制其外观。 - **body**: 主体,CSS 中可以使用各种属性来设置 `&lt;body&gt;` 的背景色、字体等。 - **head**: 头部,虽然 `&lt;head&gt;` 本身不直接呈现给用户,但可以使用 CSS ...

Global site tag (gtag.js) - Google Analytics