Without seeing the other CSS that might be involved, the likely answer is CSS specificity.

There are many guides to CSS specificity out there such as this one, but the general math for CSS specificity is:

• element selectors such as div = 1
• class selectors such as .edit-input = 10
• id selectors such as #title = 100

Because #id is such a heavily-weighted selector, it’s a good idea to avoid using ids as selectors in CSS as much as possible. They’re much harder to override in subsequent styling.

If other styling in the page includes a rule such as this (for example):

div .edit-input { /* selector "weight": 11 */
  border: 1px solid #DFE1E7;
}

Then this subsequent rule will have no effect, because it’s less specific:

.edit-input { /* selector "weight": 10 */
  border: 0;
}

You’ll need to provide a selector that is at least as specific, if not more so. Perhaps something like this:

.el-input .edit-input { /* selector "weight": 20 */
  border: 0;
}

To get this right, inspect the element using your browser’s Web Inspector tools, and see what other CSS is getting applied. Then write your own CSS with enough specificity to override the existing default styling.

I want to set border width to 0px, but border style doesn’t work when I use class selector. On the other hand, the border width worked if I use id selector!

here is the html(vue template):

<el-form-item label="Title">
    <el-input type="text" id="title" name="title" placeholder="title" v-model="editForm.title"></el-input>
</el-form-item>
<el-form-item label="Tags">
    <el-input type="text" class="edit-input" v-model="editForm.tags"></el-input>
</el-form-item>

style:

.edit-input, #title {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border: 0;
    margin-bottom: 10px;
}

what I got:

I have no idea. Why border doesn’t work when using class seletor? Or is there anything wrong in my code?