在输入中插入图标而不会中断

用户1195961

我正在努力做到这一点。
http://i.stack.imgur.com/9sAKz.png
基本上,我有一个输入,我想在该图标上添加一个图标,以便在用户将其悬停时显示工具提示。我的主要问题是了解最佳实践,以便在不破坏html结构(响应式结构或真正的旧式html结构)的情况下将图标插入输入中。

EDIT1:这是我一直在尝试使用的逻辑。

.wrapper{
  position:relative;
  display:inline-block;
  }

.myImage{
  position:absolute;
  top:3px;
  right:5px;
  }
<div class="wrapper">
  <input type="text">
  <img class="myImage" src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-1/16/information-icon.png">
  </div>

我正在开发一个插件,我在其中接收字段ID,然后在这些输入中创建图标,以便以后可以显示工具提示。

我试图去一个网站,该网站具有较旧的结构化表单,而不是响应式表单。而且很少有人使用“ display:inline-block”在显示方面出现问题。

PS:我的问题是将包装器div + display:inline-block设置为某些较旧的结构化形式,在某些形式中,应用这些属性后,它们将保持断开状态(超出原始位置)。

but

您可以使用pseudo element来实现这种功能。自从

伪元素不能直接放置在输入标签上

,我将输入包装在div中,然后将伪装在其上:

div {
  display: inline-block;
}
.cp3 input {
  width: 50px;
}
input {
  padding: 10px;
  height: 30px;
}
.cp4 {
  position: relative;
  transition: all 0.8s;
}
.cp4:hover:before {
  content: "";
  position: absolute;
  right: 5%;
  height: 30px;
  width: 30px;
  background: url(http://cdn.flaticon.com/png/256/64494.png);
  background-size: 30px 30px;
  top: 10px;
}
<div class="wrap">
  <div class="label">Postal Code</div>

  <div class="cp4">
    <input type="text" />
  </div>
  <div class="cp3">
    <input type="text" />
  </div>

</div>


您需要工具提示吗?


使用绝对定位的元素,然后将鼠标悬停在图标上时,您也可以使用~(同级选择器)显示工具提示。

为了使用css进行任何“淡入”,我已经将其应用了opacity:0 --> opacity:1一个不错的过渡。可以在下面的示例中显示:

.myInput {
  position: relative;
  display: inline-block;
  height: 30px;
  width: 200px;
  background: gray;
  transition: all 0.8s;
}
.myInput div,
input {
  position: absolute;
  display: inline-block;
}
input {
  height: 30px;
  width: 200px;
}
.tooltip {
    transition: all 0.8s;
  opacity: 0;
  height: 30px;
  width: 30px;
  position: absolute;
  background: url(http://cdn.flaticon.com/png/256/64494.png);
  background-size: 30px 30px;
  right: 0;
  top:5%;
}

.myInput:hover .tooltip{
  opacity:1;
  }

.tooltip:hover ~.msg{
  opacity:1;
  }
.msg{
  transition: all 0.8s;
  top:35px;
  left:100px;
  opacity:0;
  }
.toRight{
  top:0;
  left:220px;
  width:300px;
  }
Hover the textbox, then the icon
<br/>
<hr/>
<br/>
<div class="myInput">
  <input type="text" placeholder="text here" />
  <div class="tooltip"></div>
  <div class="msg">message here</div>
  <div class="msg toRight">Or even here</div>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在列中插入文本而不会中断间距

来自分类Dev

读取用户输入而不会中断bash

来自分类Dev

ServerSocket同时不会中断图像数据输入流

来自分类Dev

虽然循环不会中断?

来自分类Dev

MySQL删除大量行并重新插入新数据而不会中断

来自分类Dev

MySQL删除大量行并重新插入新数据而不会中断

来自分类Dev

Symfony:清除缓存而不会中断服务

来自分类Dev

WPF:实现ICommandSource而不会中断IsEnabled

来自分类Dev

Break语句不会中断循环

来自分类Dev

Break语句不会中断for循环

来自分类Dev

Python return语句不会中断循环

来自分类Dev

Vue制定了计算属性,不会中断

来自分类Dev

Symfony:清除缓存而不会中断服务

来自分类Dev

Java while循环不会中断

来自分类Dev

进入图形模式而不会中断汇编

来自分类Dev

Powershell功能不会中断

来自分类Dev

Ruby-循环不会中断

来自分类Dev

循环不会中断。C程序

来自分类Dev

fgets()while循环不会中断

来自分类Dev

Java bufferedReader readline 循环不会中断

来自分类Dev

Python while 循环不会中断

来自分类Dev

使用自定义绘图标题时,`plotly.subplots`中的注释会中断

来自分类Dev

添加表单输入会中断表单

来自分类Dev

行使用matplotlib在python中的xkcd注释中不会中断

来自分类Dev

在iOS中对齐文本(Swift或Objective-C),而不会中断跟踪/字距调整/字母间距

来自分类Dev

在SQL Server中拆分长度为nvarchar(120)的字符串而不会中断单词

来自分类Dev

关闭管道不会中断从线程产生的子进程中的read()

来自分类Dev

从进程的输出流中读取一行时,扫描器不会中断

来自分类Dev

使用python只更新队列中第一次出现的对象而不会中断

Related 相关文章

热门标签

归档