Не работает border на input

Question

Не работает border на input

Рейтинг: 0Ответов: 1Опубликовано: 15.07.2023

я пишу калькулятор на Vue, и на созданном инпуте прописал стиль в CSS border: 1px solid black, но border не появляется, что я делаю не так и как это исправить? UPD: В приложенной теме, в которой дается ответ на похожий вопрос мою проблему не решил, и мой стиль всё так же не работает, прошу открыть вопрос

<!-- language: lang-html -->
        <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial- 
        scale=1.0">
        <script src="https://unpkg.com/vue@next"></script>
        <link rel="stylesheet" href="style.css">
        <title>Calculator</title>
    </head>
    <body>
        <div id="app">
            <div class="flex">
                <input type="text" class="input">
                <ul class="list">
                    <li v-for="num in numbers" class="list-item">
                        {{ num }}
                    </li>
                    <li v-for="op in operations" class="list-item 
                    op">
                        {{ op }}
                    </li>
                </ul>
            </div>
        </div>
        <script src="app.js"></script>
    </body>
    </html>

<!-- language: lang-css -->
        * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    ul {
        list-style: none;
    }

    .flex {
        width: 200px;
        margin: 0 auto;
        transform: translateY(50%);
        box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.6) inset;
    }

    .input {
        padding: 10px;
        text-align: right;
        color: #000;
        border: 1px solid black;
    }

    .list {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 100%;
    }

    .list-item {
        width: 33.3333333333%;
        text-align: center;
        padding: 10px 5px;
        color: #FFF;
        background-color: rgb(24, 0, 0);
        cursor: pointer;
        border-right: 1px solid #FFDFC4;
        border-bottom: 1px solid #FFDFC4;
    }

    .list-item:last-child {
        width: 100%;
    }
<!-- language: lang-js -->
    Vue.createApp({
        data() {
            return {
                inputValue: '',
                numbers: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
                operations: ['+', '-', '*', '/', 'C', '=']
            }
        }
    }).mount('#app')