使用 CSS 自定义类型的输入答案

【问题标题】：Customize on Input of Type Using CSS使用 CSS 自定义类型的输入
【发布时间】：2020-08-22 07:33:24
【问题描述】：

我有一个这样的psd。我想把它变成这样的东西：

如何使用 CSS 自定义输入类型编号的增量箭头？

 input[type="number"] {
        -webkit-appearance: textfield;
        -moz-appearance: textfield;
        appearance: textfield;
    }
    
    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
    }
    
    .number-input {
        border: 2px solid #ddd;
        display: inline-flex;
    }
    
    .number-input,
    .number-input * {
        box-sizing: border-box;
    }
    
    .number-input button {
        outline:none;
        -webkit-appearance: none;
        background-color: transparent;
        border: none;
        align-items: center;
        justify-content: center;
        width: 3rem;
        height: 3rem;
        cursor: pointer;
        margin: 0;
        position: relative;
    }
    
    .number-input button:before,
    .number-input button:after {
        display: inline-block;
        position: absolute;
        content: '';
        width: 1rem;
        height: 2px;
        background-color: #212121;
        transform: translate(-50%, -50%);
    }
    .number-input button.plus:after {
        transform: translate(-50%, -50%) rotate(90deg);
    }
    
    .number-input input[type=number] {
        font-family: sans-serif;
        max-width: 5rem;
        padding: .5rem;
        border: solid #ddd;
        border-width: 0 2px;
        text-align: center;
    }

 <td>
        <div class="form-row justify-content-center">
            <div class="form-group">
                <div class="input-group mx-auto mb-3">
                    <div class="number-input">
                        <button onclick="this.parentNode.querySelector('input[type=number]').stepDown()" ></button>
                        <input class="quantity" min="0" placeholder="0" name="quantity" value="1" type="number">
                        <button onclick="this.parentNode.querySelector('input[type=number]').stepUp()" class="plus"></button>
                    </div>
                </div>
            </div>
        </div>
    </td>

但我看到了这个演示

demo

显示很糟糕。

第二个视图使用两个单独的按钮进行模拟。

如何按照描述设置箭头样式？

谁能建议我哪里出错了？

谢谢。

【问题讨论】：

你用过引导程序吗？顺便说一句，您的代码不会生成紫色。
@Rex 编辑不好 :( 现在我搞不清楚他想要什么了
请在评论中告诉您想要哪种类型的最终输出？
是的，我正在使用bootstrap 4.5.1。我看到了这个演示i.stack.imgur.com/yDYHe.png
我有一个这样的 psd i.stack.imgur.com/kUKzi.png

标签： html css

【解决方案1】：

看看这个sn-p：

        input[type="number"] {
            -webkit-appearance: textfield;
            -moz-appearance: textfield;
            appearance: textfield;
        }

        input[type=number]::-webkit-inner-spin-button,
        input[type=number]::-webkit-outer-spin-button {
            -webkit-appearance: none;
        }

        .number-input {
            border: 2px solid #ddd;
            display: inline-flex;
        }

        .number-input,
        .number-input * {
            box-sizing: border-box;
        }

        .number-input button {
            outline:none;
            -webkit-appearance: none;
            background-color: transparent;
            border: none;
            align-items: center;
            justify-content: center;
            width: 3rem;
            height: 3rem;
            cursor: pointer;
            margin: 0;
            position: relative;
        }

        .number-input button:before,
        .number-input button:after {
            display: inline-block;
            position: absolute;
            content: '';
            width: 1rem;
            height: 2px;
            background-color: #212121;
            transform: translate(-50%, -50%);
        }
        .number-input button.plus:after {
            transform: translate(-50%, -50%) rotate(90deg);
        }

        .number-input input[type=number] {
            font-family: sans-serif;
            max-width: 5rem;
            padding: .5rem;
            border: solid #ddd;
            border-width: 0 2px;
            text-align: center;
        }

        .magenta{
            background-color: magenta;
        }

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <!-- JQuery -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <!-- Bootstrap core CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap tooltips -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body class="magenta">
    <table class="mx-auto">
        <tr>
            <td>
                <div class="form-row justify-content-center">
                    <div class="form-group">
                        <div class="input-group mx-auto mb-3">
                            <div class="number-input">
                                <button onclick="this.parentNode.querySelector('input[type=number]').stepDown()" ></button>
                                <input class="quantity bg-light" min="0" placeholder="0" name="quantity" value="1" type="number">
                                <button onclick="this.parentNode.querySelector('input[type=number]').stepUp()" class="plus"></button>
                            </div>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

我做了以下调整：

因为整体背景是洋红色并且您共享单个表格单元格，所以我使用 magenta 类将背景颜色应用于文档正文。
使用类 mx-auto 的居中表格，如图所示。
使用 bg-light 类为 <input type="number"> 应用白色背景，因为在某些浏览器中，例如 Mozilla Firefox，默认背景为灰色

【讨论】：

它显示大我想显示i.stack.imgur.com/kUKzi.png