昨起兴折腾的《对留言输入框的小小美化》,反响不错,受各位童鞋喜爱,今儿继续,来个无图纯代码实现方法。

还是先改动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>

再添加以下代码至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;}

OK,效果是不是一样呀?而且还省了3张图片哦~鼓掌!!!

PS:CSS代码参考Wopus中文博客平台,酋长可别怪我不问自求哦~细