文章/答案/技术大牛

发布

社区首页 >问答首页 >css中的引导焦点输入和图标

问css中的引导焦点输入和图标
EN

Stack Overflow用户

提问于 2018-05-09 17:43:36

回答 1查看 415关注 0票数 1

如何在两个元素上创建焦点？

 <div class="form-group">
    <label class="control-label"></label>
    <div class="col-sm-10">
        <input type="text" class="form-control">
        <span class="loop-icon form-control-feedback"></span>
    </div>
</div>

无焦点

我想要一个像结果那样的东西

我不想使用javascript

css

styles

bootstrap-4

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-05-09 18:06:58

您可以使用同级选择器“+”来选择下一个元素。

.inp:focus + .icon{
  color:red;/* can use any color*/
}

当输入聚焦时，此代码将选择输入的同级，即图标类，

form-group{
position:relative;
}

.icon{
    position: absolute;
    right: 35px;
    top: 11px;
}
.inp{
  padding:right:40px;
}

.inp:focus + .icon{
  color:red;/* can use any color*/
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
    <label class="control-label"></label>
    <div class="col-sm-10">
        <input type="text" class="form-control inp">
        <span class="fa fa-search form-control-feedback icon"></span>
    </div>
</div>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50259223

复制

相似问题

问css中的引导焦点输入和图标
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问css中的引导焦点输入和图标EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问css中的引导焦点输入和图标
EN