WordPress 访客信息输入框美化

发布于：电脑网络, 精品推荐, 转来载去 790 次践踏

昨天和久闻大名的木木木木木童鞋（以下简称木木）交换了友链，真是相“链”恨晚啊，才知道木木和我一样喜欢折腾 WordPress，他还专门开辟了一个分类目录“折腾WP”，让我大饱眼福。木木童鞋看了我的《个性化 WordPress 评论框》后给我推荐了一篇《访客信息输入框美化之无图篇》作为补充，效果可见木木童鞋的留言框，确实很有个性，可惜我的评论框宽度不够，不得不放弃这个效果，但是我相信一定有朋友会喜欢这个效果的，所以特地转来分享下。

1、修改 comments.php，直接复制此段代码替换相应代码：

<div>
<input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" tabindex="1"/>
<label for="author"><small>昵称:</small><?php if ($req) _e(" "); ?></label>
<input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" tabindex="2"/>
<label for="email"><small>邮箱:</small><?php if ($req) _e(" "); ?></label>
<input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" tabindex="3" />
<label for="url"><small>网址:</small></label>
</div>

2、再添加以下代码至 style.css

#respond form input {font:12px;color:#333;width:170px;padding:3px 3px 3px 45px;margin-right:10px;}
#respond form div {margin:0 0 10px 3px;}
#respond form div label {margin-left:-40px;}
#respond form div label small {color:#777; font-size:16px; position:relative;left:-190px;}
*html #respond form div label small {position:relative; top:-2px;}
*+html #respond form div label small {position:relative; top:-2px;}

木木原创，万戈推荐：http://immmmm.com/message-input-box-landscaping-css.html

  1. 没有这个命了，用了这方法邮箱这框不知道怎么会在第一行，调不 回来了，下面提交评论的按钮也难看了。。。也不知道怎么修改代码。。。