Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[css] 第1077天 在css中如何去掉type="number"尾部的箭头？ #5021

Open
haizhilin2013 opened this issue Mar 27, 2022 · 1 comment
Open

[css] 第1077天 在css中如何去掉type="number"尾部的箭头？ #5021

haizhilin2013 opened this issue Mar 27, 2022 · 1 comment
Labels
css css

Comments

@haizhilin2013
Copy link
Collaborator

第1077天 在css中如何去掉type="number"尾部的箭头？

3+1官网

我也要出题
@haizhilin2013 haizhilin2013 added the css css label Mar 27, 2022
@LstHeart
Copy link

html5中，input type="number",会默认显示上下箭头，可通过设定 input::-webkit-outer-spin-button 、input::-webkit-inner-spin-button 的-webkit-appearance: none 去掉箭头：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Test</title>
    <style>
        /* 去掉number类型自带的加减按钮 */
        .without-arrow::-webkit-outer-spin-button,
        .without-arrow::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }

        .without-arrow[type="number"] {
            -moz-appearance: textfield;
        }
    </style>
</head>

<body>
    <h1>Test</h1>
    <input type="number" class="without-arrow" />
</body>

</html>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css css
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@haizhilin2013 @LstHeart