I want to create a text field in vuetify

Question

https://i.stack.imgur.com/zbCfI.png

I want to create a text field in vuetify, but the button cannot be made like this? And the height, but it can't be changed? I tried changing the height multiple times but it doesn't work

I already have the css but it's hard to use on vuetify

.parent-box{
  width:fit-content;
  background:#26376B;
}
.text-box{
  border:1px solid #CACACA;
  padding:5px 10px;
  min-width:300px;
}
.btn{
  padding:5px 20px;
  width:100px;
  color:#fff;
  border:none;
  background-color:#26376B;
  cursor:pointer;
}
.common{
  outline:none;
  border-radius:50px;
}

<div class="parent-box common">
  <input class="text-box common" type="text" placeholder="Chassis Number">
  <button class="btn common">Check</button>
</div>

Answer 1

Similar things can be done like this:

...

  
    
    Check
  


...

LookThis CodePen

Many styles can be customized in vuetify via props. But by default, vuetify is inspired by Material Design, and contrary to your example, customizing the default styles is not that easy. For your case it might be better to apply some vuetify theme before using this library.

Answer 2

Problem Statement: Want to create a text field with a button in Vuetify.

solution:

HTML：

Vue.js：

new Vue({
  el: "#app",
    vuetify: new Vuetify(),
  data: {
    input: ''
  },
  methods: {
    show(){
      alert(this.input)
    }
  }
})

Output: