Html Can';控制CSS转换中的可点击区域
我正在尝试创建一个滑动搜索栏/框,当您选择放大镜时,该搜索栏/框会在变换中移动。问题在于,只有一小部分空间可以选择放大镜打开搜索栏。然后,当搜索栏被打开时,关闭它的空间向后移动(在放大镜的右边)大约5像素。我想选择的区域是在放大镜上的整个时间 这是HTMLHtml Can';控制CSS转换中的可点击区域,html,css,css-transitions,Html,Css,Css Transitions,我正在尝试创建一个滑动搜索栏/框,当您选择放大镜时,该搜索栏/框会在变换中移动。问题在于,只有一小部分空间可以选择放大镜打开搜索栏。然后,当搜索栏被打开时,关闭它的空间向后移动(在放大镜的右边)大约5像素。我想选择的区域是在放大镜上的整个时间 这是HTML <div class="wrap"> <form action="" autocomplete="on"> <input id="search" name="search" type="text" p
<div class="wrap">
<form action="" autocomplete="on">
<input id="search" name="search" type="text" placeholder="Search by Address, Agent or Client..."/>
<span class="fa fa-search"></span>
</form>
这是我的现金
这是我试图用自己的设计模仿的原稿。我认为您只需要在输入中添加
右键填充
,请参见我在第二次单击(删除搜索框/栏)时仍遇到问题,我必须单击图标右侧的5个像素。啊,好的,我已经更新了代码笔,并将输入更改为默认的z-index:3代码>然后聚焦时具有z索引:1
。span具有z索引:2
。这样,当输入被聚焦(然后移除焦点)时,跨度是可点击的。谢谢!我现在看到问题了。
body {
background: #005DC1;
font-size: 15px;
}
.wrap {
position: relative;
right: 50px;
height: 22px;
float: right;
}
input[type="text"] {
height: 20px;
width: 0px;
font-size: 12px;
font-family: helvetica;
border: none;
outline: none;
color: rgba(255, 255, 255, 0.8);
padding: 3px;
position: absolute;
top: 0;
right: 0;
background: none;
z-index: 1;
transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000);
cursor: pointer;
}
input[type="text"]:focus:hover {
border-bottom: 1px solid #fff;
}
input[type="text"]:focus {
width: 250px;
z-index: 1;
border-bottom: 1px solid #fff;
cursor: text;
}
.wrap span {
color: rgba(255, 255, 255, 0.8);
z-index: 5000;
cursor: pointer;
right: 3px;
height: 20px;
width: 25px;
}