Input框内嵌重置按钮（CSS）

Hnhyyyy

已于 2023-11-09 22:58:47 修改

阅读量1.1k

点赞数

分类专栏： Web前端文章标签：前端 css

于 2023-09-24 17:58:59 首次发布

本文链接：https://blog.csdn.net/m0_74002634/article/details/133245757

版权

Web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

目录捏

一、效果
二、操作步骤

一、效果

怎样设置CSS样式，将一个重置按钮放入Input框内以达到如图效果？

在这里插入图片描述

二、操作步骤

<div class="b-id">
    <label for="b-userid" class="userid">学号</label>
    <input type="text" id="b-userid" name="b-userid">
    <button type="reset" class="b-userid">重置</button>
</div>

1.首先为重置按钮的父元素 b-id 设置相对定位

.b-id {
    position: relative;
}

在这里插入图片描述

2.为重置按钮 button 设置绝对定位

.b-id button {
    position: absolute;
    cursor: pointer; // 设置鼠标在按钮上方的样式
    color: #909fcd;
}

在这里插入图片描述

3.去除重置按钮的border、outline属性，最后调整按钮位置（top、right）即可

.b-id button {
    position: absolute;
    border: none;
    outline: none;
    cursor: pointer; // 设置鼠标在按钮上方的样式
    top: 38px;
    right: 10px;
    color: #909fcd;
}