个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
25
4
我正在尝试在右侧添加一个眼睛图标。在我的原始代码中，它显示在右侧但没有响应，并且会在屏幕尺寸更改时移动。
下面是一个松散的实现。我希望它应该在输入字段在两个密码字段中结束之前显示在右侧。目前它显示但不正确。全屏测试。
.login-form {
margin: 20px 0 0 0;
}
.login-form input[type=text] {
background: #fff;
border: none;
border-radius: 8px;
position: relative;
font-size: 15px !important;
display: inline-block;
outline: none;
width: 100%;
height: 30px !important;
padding: 18px 0 18px 20px;
margin-bottom: 15px !important;
color: #666 !important;
border: 1px solid grey;
}
.login-left {
width: 44%;
margin: 0 0 0 5%;
display: inline-block;
float: left;
}
.login-right {
width: 44%;
margin: 0 5% 0 0;
display: inline-block;
float: right;
}
@media screen and (max-width:767px) {
.login-width {
width: 95% !important;
}
.login-left {
width: 90%;
margin: 0 auto;
display: block;
float: none;
}
.login-right {
width: 90%;
margin: 0 auto;
display: block;
float: none;
}
}
.p-viewer {
z-index: 9999;
position: absolute;
left: 560px;
margin-top: -60px;
}
.fa-eye {
color: #000;
}<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="login-form">
<div class="login-left">
<div class="clearfix"></div>
<input type="text" placeholder="Email *"/>
<div class="clearfix"></div>
<input type="text" placeholder="Password *"/>
<span class="p-viewer">
<i class="fa fa-eye" aria-hidden="true"></i>
</span>
<div class="clearfix"></div>
</div>
<div class="login-right">
<div class="clearfix"></div>
<input type="text" placeholder="Confirm email *"/>
<div class="clearfix"></div>
<input type="text" placeholder="Confirm password *"/>
<span class="p-viewer2">
<i class="fa fa-eye" aria-hidden="true"> </i>
</span>
<div class="clearfix"></div>
<br>
</div>最佳答案
CSS:
.login-form {
width: 100%;
margin: 20px 0 0 0;
}
.login-left {
width: 50%;
float: left;
}
.login-right {
width: 50%;
float: right;
}
.login-form input[type=text] {
background: #fff;
border: none;
border-radius: 8px;
position: relative;
font-size: 15px !important;
display: inline-block;
outline: none;
width: 100%;
height: 30px !important;
padding: 18px 0 18px 0px;
margin-bottom: 15px !important;
color: #666 !important;
border: 1px solid grey;
}
.pwd{
position: relative;
}
.p-viewer {
z-index: 9999;
position: absolute;
top: 30%;
right: 10px;
}
.fa-eye {
color: #000;
}
@media screen and (max-width:767px) {
.login-width {
width: 95% !important;
}
.login-left {
width: 90%;
margin: 0 auto;
display: block;
float: none;
}
.login-right {
width: 90%;
margin: 0 auto;
display: block;
float: none;
}
}<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<link rel="stylesheet" type="text/css" href="demo.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<div class="login-form">
<div class="login-left">
<div class="clearfix"></div>
<input type="text" placeholder="Email *"/>
<div class="clearfix"></div>
<div class="pwd">
<input type="text" placeholder="Password *"/>
<span class="p-viewer">
<i class="fa fa-eye" aria-hidden="true"></i>
</span>
</div>
<div class="clearfix"></div>
</div>
<div class="login-right">
<div class="clearfix"></div>
<input type="text" placeholder="Confirm email *"/>
<div class="clearfix"></div>
<div class="pwd">
<input type="text" placeholder="Password *"/>
<span class="p-viewer">
<i class="fa fa-eye" aria-hidden="true"></i>
</span>
</div>
<div class="clearfix"></div>
</div>
</div>
</body>
</html>.login-form input[type=text] {
padding: 18px 0 18px 20px;}
因为首先你给出了 100% 宽度 + 填充，所以产生了问题。
你的眼睛问题解决了这些代码:
<div class="pwd">
<input type="text" placeholder="Password *"/>
<span class="p-viewer">
<i class="fa fa-eye" aria-hidden="true"></i>
</span>
</div>
只需添加带有 position:responsive 和 next class = p-viewer 的 div 标签，添加 position:absolute 就不会产生位置问题...
此代码完全响应且更改简单
关于html - 在右侧的输入字段内添加 fa eye 图标，这是响应式的，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56732879/
25
4
0
我试图在我创建的页面中显示一些图标。问题是当我在我的代码中放入下面两行时，无法显示评论图标和用户添加图标: 顺便说一句，您可以查看下面的两个链接，了解我要显示的评论图标和用户添加图标是什么: 评论
View Delta View Full Comparison 最佳答案 您需要导入font-aweso
如果 fa fa 图标处于事件状态，有什么方法可以设置它的样式吗？例如按钮: button:active { color: white; } 有什么方法可以像这样设置图标样式吗？谢谢! 最佳答案
我的 index.html.erb 中有这样的命令 当我在 chrome 中打开 html 时，微调器不显示。我也尝试过使用 safari。任何人都知道这是什么问题 在我的表单提交中它也不起作用。我
我正在使用这个 Boot 带模板 http://startbootstrap.com/template-overviews/stylish-portfolio/ 在index.html的底部，有一些f
更新代码: 添加后建议.00这是现在呈现的内容: 我尝试使用 style="margin-left:200px;"但什么也没做 更新结束 如何添加fa fa search在文本框的右侧？这是呈现代码后
在我的表单中，当内部电子邮件正确时，电子邮件 输入框会显示一个绿色圆圈 x。 我希望它显示一个绿色复选标记圆圈图标，如上面的输入框(名字和姓氏)。 此外，当号码无效时，phone 输入框会显示一个红色
嗨，有人可以帮我吗，我怎样才能将焦点从搜索图标更改为 x 图标这是我的代码:
我试图让“fa fa-search”在输入框中工作，但它不起作用。我在同一个问题上看到了其他问题，但它们对我不起作用。谁能指出问题。 这是我的 CSS 代码 .
我正在尝试使用 fa-fw 和 fa-border 创建一些图标，让它们具有相同的宽度和边框。我曾尝试使用 fa-stack，但这不再是一个选项。 当只使用 fa-border 时，里面的图标被放置在
我想使用 css 为 fa-search 和带有此 html 的文本设置单独的颜色吗？ logos 最佳答案 不确定我是否理解您的要求 - 您帖子的标题表明您希望图标和文本的颜色相同 - 但问题要求不
这就是我正在做的设计，我做的每一件事都是正确的，但无法修复最后一部分，即 fa fa 电话图标部分。
我们如何在单个输入文本框中添加两个 fa-fa 图标。当我在我的输入中应用我的代码时，它显示如下所示。 我错了。先生，请解决我的问题.. 我的代码是: .field-icon { float:
我的网站上有 fa 图标，图标后面有小背景。当我添加“transform: scale(1.2);”使悬停时图标变大的代码，背景也变大。如何解决这个问题？ :/ 这是整个代码: #snav { p
我找不到如何将伪 :hover 添加到“Font-awesome”图标(fa-fa 图标)。 如果有人能提供帮助，我将不胜感激。 HTML: CSS: .overview, .tier {
所以我在这里稍微改变一下我的装备。我为我的菜单创建了一个响应式导航栏，但不幸的是，当它处于移动形式时，它没有在菜单栏中显示标题。对于我的导航栏更新，我复制并粘贴了 W3schools 的代码，然后对其
$(function() { $(".rate i").css('cursor', 'pointer'); $(".rate i").click(function() { $(this
我正在使用 psych因子分析包。我想在 fa() 中指定潜在因素的标签对象，或使用 fa.diagram() 绘图时. 例如，玩具数据: require(psych) n <- 100 choice
我想将悬停水平条/边框置于菜单上方的中央。(我已经尝试过 text-align: center 和 align-content)。我该怎么做？ 这是我的代码: nav ul { list-style-
这个问题在这里已经有了答案: Font Awesome 5 unicode (3 个答案) 关闭 4 年前。
我是一名优秀的程序员,十分优秀！