.search:focus { width: 200px; }
时间: 2023-06-18 15:05:50 浏览: 53
这是一个 CSS 样式规则,用于调整搜索框的宽度为 200 像素。当搜索框被聚焦时(即用户点击或者通过 tab 键进入搜索框),此样式将生效。可以用在网页的 CSS 文件中,例如:
```
.search:focus {
width: 200px;
}
```
然后在 HTML 中的搜索框元素中添加类名 `search` 即可:
```
<input type="text" class="search" placeholder="Search...">
```
相关问题
* { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; } body { background: #252525; } .container { position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; width: 300px; height: 100px; } .container .search { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; width: 80px; height: 80px; background: crimson; border-radius: 50%; transition: all 1s; z-index: 4; box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.4); } .container .search:hover { cursor: pointer; } .container .search::before { content: ""; position: absolute; margin: auto; top: 22px; right: 0; bottom: 0; left: 22px; width: 12px; height: 2px; background: white; transform: rotate(45deg); transition: all 0.5s; } .container .search::after { content: ""; position: absolute; margin: auto; top: -5px; right: 0; bottom: 0; left: -5px; width: 25px; height: 25px; border-radius: 50%; border: 2px solid white; transition: all 0.5s; } .container input { font-family: "Inconsolata", monospace; position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; width: 50px; height: 50px; outline: none; border: none; background: crimson; color: white; text-shadow: 0 0 10px crimson; padding: 0 80px 0 20px; border-radius: 30px; box-shadow: 0 0 25px 0 crimson, 0 20px 25px 0 rgba(0, 0, 0, 0.2); transition: all 1s; opacity: 0; z-index: 5; font-weight: bolder; letter-spacing: 0.1em; } .container input:hover { cursor: pointer; } .container input:focus { width: 300px; opacity: 1; cursor: text; } .container input:focus ~ .search { right: -250px; background: #151515; z-index: 6; } .container input:focus ~ .search::before { top: 0; left: 0; width: 25px; } .container input:focus ~ .search::after { top: 0; left: 0; width: 25px; height: 2px; border: none; background: white; border-radius: 0%; transform: rotate(-45deg); } .container input::placeholder { color: white; opacity: 0.5; font-weight: bolder; }
这段代码是一个简单的搜索框样式,使用了CSS3的动画效果。其中包括一个圆形搜索按钮(红色),点击按钮后输入框会从小圆圈扩大为长方形,并且搜索按钮会移动到输入框的左侧,并且变为白色。同时,输入框的背景颜色也会变成一个深色,并且输入框的宽度会变宽,以便用户能够输入更多的内容。在输入框中输入搜索内容时,输入框的文本颜色变为白色,而搜索按钮的形状也会变化,以增强用户的反馈感。
scss :focus
在SCSS中,`:focus`是一个伪类选择器,用于选中获得焦点的元素。可以通过嵌套的方式来使用`:focus`选择器。
以下是一个示例代码:
```scss
<style scoped lang="scss">
.hello {
width: 80vw;
.search {
font-size: 24px;
&:focus {
// &:focus代表嵌套规则外层的父选择器
// 当input获得焦点时,改变边框颜色
border-color: #0086ff;
}
}
}
</style>
```
在上面的示例中,当`.search`元素获得焦点时,会应用`:focus`选择器下的样式,即改变边框颜色为`#0086ff`。