不积跬步,无以至千里;不积小流,无以成江海。

Dean's blog

  • Join Us on Facebook!
  • Follow Us on Twitter!
  • LinkedIn
  • Subcribe to Our RSS Feed

使用CSS3 实现input框旁边的清空input内容按钮的显隐

如下一个效果,在同一个框内有选择功能和清空功能,但希望只在选择了数据后,才出现清空功能。如下:

原始效果:

未选择:

选择后:

在以前这种效果只能使用JS来控制清空按钮,从CSS3后,可直接通过css来控制。如下:

HTML

<div class="input-group right">
    <input type="text" class="form-control ParentIdText" name="ParentIdText" required="required">
    <input type="hidden" class="form-control ParentId ParentIdValue" name="ParentId">
    <div class="input-group-btn ParentIdSelector">
        <button type="button" class="btn default editable-cancel"><i class="fa fa-times"></i></button>
        <button type="button" class="btn default selector" tabindex="-1">选择<i class="fa fa-angle-down"></i></button>
    </div>
</div>

CSS

.ParentIdText:invalid + .ParentIdValue + .input-group-btn > .editable-cancel { display: none; }

这里有两个需要注意的:

1、.ParentIdText上设置required属性;

2、通过:invalid控制清空按钮是否显示,其中:invalid用于识别验证失败的控件,见这里:http://www.runoob.com/cssref/sel-invalid.html

与:invalid相应的,还有:valid(识别验证成功的),见这里:http://www.runoob.com/cssref/sel-valid.html

问题

问题一:如果上面的上级架构为可选时,则存在问题。

由于required属性和jquery-validate.js的必填规则同名,导致字段成为必须选择,这个和原来的需求有冲突。原计划动态删除验证规则,如下:

$("#ParentIdText").rules("remove");

但是删除后,在提交的时候,依然会提示错误。

目前还不清楚如何解决这个冲突 :( ,有解决方案的欢迎提供。

不允许评论
粤ICP备17049187号-1