CSS适用于特定类别

Question

I have an issues with bootstrap css overlap with custom css. This is my app html that render date-picker and it's using bootstrap css.

 <input type="text" class="datepicker-input" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="status.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" ng-click="open($event)" placeholder="Choose your date"/>

This is my custom made .btn class that cause an issue with bootstrap btn class. I can't remove this class or modify the name directly as many other pages using this btn style.

.btn {
    background-color: #b0b1a8;
    border-radius: 4px;
    border-width: 0;
    color: #fff;
    display: inline-block;
    font-weight: bold;
    font-size: 21px;
    font-size: 2.1rem;
    padding: 8px 20px;
    padding: 0.8rem 2rem;
    margin: 0;
    outline: none;
    text-align: center;
    -webkit-transition: background-color 100ms cubic-bezier(0.25, 0.1, 0.25, 1), border-color 100ms cubic-bezier(0.25, 0.1, 0.25, 1);
    -moz-transition: background-color 100ms cubic-bezier(0.25, 0.1, 0.25, 1), border-color 100ms cubic-bezier(0.25, 0.1, 0.25, 1);
    transition: background-color 100ms cubic-bezier(0.25, 0.1, 0.25, 1), border-color 100ms cubic-bezier(0.25, 0.1, 0.25, 1);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap
}

Now, how can I trick the above css so not to implement it's .btn to my date picker button. Thanks

Answer 1

您应该尝试更改自定义CSS类名称（.btn）

Answer 2

So, what it sounds like is you want your date picker to look a certain way but the .btn css from bootstrap is doing what it wants? If you are able to add a class to that button then you may just have to override it using !important .

For example:

.bootstrap-btn{background: pink; font-size: 20px; border: 3px solid white;}

.my-new-btn{background: white !important; font-size: 24px !important; border: 2px solid green !important;}

Again, this would be if you can add the my-new-btn class to your button. I have had to use this method quite a few times when I cannot edit classes loaded via scripts or something.