Solution 1 :

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.

Problem :

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 label="Tags">
    <el-input type="text" class="edit-input" v-model="editForm.tags"></el-input>


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

what I got:

enter image description here

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


Comment posted by

border: 0

Comment posted by

Probably not enough specifity using class selector. Class has specifity 10, id has 100. More here ⏩

Comment posted by winterszhang

@Adam Orlov I think you are right, it’s the specifity problem, thank you very much!

Comment posted by Mr. Perfectionist

May be you are using Element Input Component, right?

Comment posted by][1]

You are using [

Comment posted by connexo

For exactly the reason that is causing OP’s problem you should strongly advise against

Comment posted by winterszhang

@simmer Thank you so much! I think I got it. It was overrided by some other css.