Нюанс по работе с vue и выравнивание placeholder

Question

Подскажите пожалуйста, почему не выравнивается плейсхолден по центру? И второй вопрос: не приложу голову, как можно стилизовать несколько кнопок выборочно, если они были созданы через vue через директиву v-for. Нужно Поменять цвет, и растянуть кнопку на 2 грид поля.

const app = Vue.createApp({
  data() {
    return {
       result: '',
       numbers: ['C', '*', '/', '-', 7, 8, 9, '+', 4, 5, 6, '%', 1, 2, 3, '=', '.', 0]
    };
   },
   methods: {

   }
}).mount('#app');

.calculator {
   margin: 100px auto;
   max-width: 300px;
   background-color: #233446;
   color: #fff;
   padding: 15px;
   box-shadow: 5px black;
   user-select: none;
}

.wrapper-item{
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   grid-gap: 10px;
}

.item{
   grid-column: 25%;
   padding: 15px;
   color: #fff;
   font-size: 26px;
   border: none;
   background-color: #31455e;
   cursor: pointer;
}

.item:hover{
   transform: scale(1.1);
}

.input{
   grid-column: 1/ -1;
   height: 50px;
   background-color: #31455e;
   text-align: right;
   outline: none;
   display: flex;
   align-items: center;
}

::placeholder{
   font-size: 26px;
   color: #fff;
   display: flex;
   align-items: center;
}

<!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>calculator</title>
   <link rel="stylesheet" href="style.css">
</head>

<body>

   <div id='app'>
      <div class="calculator">
         <div class="wrapper-item">
            <input class="input" type="text" placeholder="0" readonly>
            <button class="item" v-for="num of numbers">{{num}}</button>
         </div>
      </div>
   </div>


   <script src="https://unpkg.com/vue@next"></script>
   <script src="main.js"></script>
</body>

</html>

БЛОГ НА HUSL

Нюанс по работе с vue и выравнивание placeholder

Ответы (0 шт):