文本框美化代码（文本修饰代码）

本篇文章给大家谈谈文本框美化代码，以及文本修饰代码对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、如何快速书写html代码
• 2、易语言怎么美化编辑框
• 3、word 文本框怎么样美化！急
• 4、kindeditor 如何实现和input的placeholder属性的效果
• 5、想百度的输入框怎么做啊？我想知道输入框应该怎么美化就好看了，不是那种直接的文本框。急……

如何快速书写html代码

1.自己写的页面代码，（最好是吧html文件和css文件分开哦，这样浏览器运行的快），简单的自己可以整理好，如果太长了那就按ctrl+a全选，再按ctrl+c复制

2.打开浏览器（要能上网的前提下哦），点百度在搜索栏写“Html在线美化压缩/转js"，点击搜索····

3.进入页面后，你可以看到如下面的图片显示的页面，看好上面的网址末尾是html哦，然后将文本框里面的内容删掉，并把你刚才复制的全部代码粘贴到下面的编辑文本框（ctrl+v）.

4.复制完后，点击下面的美化，完了之后编辑文本框中显示的代码就是美化后的，你可以继续进行--全选（ctrl+a）--复制（ctrl+c）,用这些代码全部替换你原来的代码，你的html代码结构就很清楚了，而且也利于修改啦~~

5.如果你还想修改你的css代码，你可以将如下图所示的地方修改成“css”然后（回车）即可看到如下面所示的图片的页面

6.然后你就按之前说的将你的css代码全部放到这个编辑文本框中，你可以进行文本框下面的操作，不同的操作对应的样式也是不一样的，具体如下图所示喔~~

7.其实”净化“和”整理“是很像的就是最后一个css只是否多个”；“，整理时有分号的，净化是没有的（小伙伴要看仔细咯），如果没有看清楚，可以返回上步仔细看，也可以自己亲自试试

易语言怎么美化编辑框

我用的方法....

自己制作一张编辑框图片,在易语言中使用图片框加载图片

将图片框 置于最底层 (在图片框上点右键---到最底层)

添加编辑框组件,在组件边框属性中把属性调整为 无边框  就OK了!

效果图已上传~!

word 文本框怎么样美化！急

可以用word中的“设置文本框格式”来给文本框添加花边，在“颜色与线条”标签下将线条颜色选项设置成“带图案的线条”，在此项目中选择自己喜欢的图案、颜色、宽度就行。

kindeditor 如何实现和input的placeholder属性的效果

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 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:#090; background:lightgreen; text-transform:uppercase; }

#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

/* individual: mozilla */

#field2::-moz-placeholder { color:#00f; }

#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }

#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

想百度的输入框怎么做啊？我想知道输入框应该怎么美化就好看了，不是那种直接的文本框。急……

可以用css来改变文本框的样式，比如下面这个文本框是没有边框的：

input type=text value="" style="border:0"

下面这个文本框的背景是用图片的，这样就可以做出任何你可以想象出的样式了：

input type=text value="" style="border:0; background:url(back.jpg) no-repeat; width:100px; height:22px"

补充一下：百度所用的文本框样式是：

input type=text value="" style="width:404px;height:22px;padding:4px 7px;padding:6px 7px 2px\9;font:16px arial;background:url() no-repeat -304px 0;_background-attachment:fixed;border:1px solid #cdcdcd;border-color:#9a9a9a #cdcdcd #cdcdcd #9a9a9a;vertical-align:top;margin:0 5px 0 0"

看起来虽然很复杂，但原理是一样的。你把这段直接复制到自己的网页，效果就跟百度一样的了

关于文本框美化代码和文本修饰代码的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。