CODEWITHSUNDEEP
vue.jsbuefy
TechDev
TechDev

Reputation: 433

buefy input not changing border style color

I wanted to change the style of b-input buefy but when I try changing the design it doesn't work.

Here is my code.

<b-field>
<b-input
placeholder="Username"
size="is-medium"
></b-input>
</b-field>


<style>
input.input.is-medium {
    border: 1px solid red;
}
</style>

Output

Upvotes: 1

Views: 1666

Answers (2)

mikeypie
mikeypie

Reputation: 149

Late answer.

The selector seems correct, so I'm not sure why it doesn't work for you. Your example works in my environment (Buefy 0.9.4, Vue 2.6.10).

You might try a less specific selector:

input {
  border: 1px solid red;
}

Or... (cringe) use the important flag:

input.input.is-medium {
  border: 1px solid red !important;
}

To customize just a single input, try assigning a ref attribute to the <b-input> and then use JS to update the style. Note that <b-input> creates a <div> that wraps the <input>, so we have to go hunting for it using $el and querySelector.

Buefy HTML

<b-input
  ref="myInput"
  placeholder="Username"
  size="is-medium"
></b-input>

VueJS

mounted() {
  this.$refs.myInput.$el.querySelector('input').style.border = "1px solid red";
},

Upvotes: 1

Guillaume F.
Guillaume F.

Reputation: 6473

If you want to change all your buttons, take a look at Bulma's variables.

Buefy uses Bulma CSS

https://bulma.io/documentation/elements/button/#variables

Here, you will want to change $button-border-color

Upvotes: 1

Related Questions