谁能告诉我,当我点击搜索框时,如何从搜索框中删除框阴影?虽然我知道如何从类中删除box-shadow,但在CSS中,我不知道如何从标记的属性中删除box-shadow,例如“data-search”。
wj8zmpe11#
使用数据搜索选项创建的输入字段有两个类:form-control(它继承了bootstrap样式,因此继承了焦点输入的box-shadow)和search-input,它可能是bootstrap-table所特有的,因此可以用来覆盖默认行为。注意:请检查页面中是否有其他不希望覆盖默认行为的类。CSS可能有另一种方式与SASS,但为了这个例子,我认为CSS是最简单和最容易理解的方式,可以使用以下方式。
form-control
search-input
.search-input:focus { box-shadow: none; border: 1px solid #ced4da; }
.search-input:focus只在聚焦时应用CSS。box-shadow: none;将删除框阴影。但是,该字段仍将以蓝色勾勒,只是没有阴影。如果需要,则跳过下一行。如果你想让盒子看起来完全一样,而不管焦点如何,那么假设默认的配色方案没有改变,可以用border: 1px solid #ced4da;来设置它来模仿它的非焦点样式。A working example can be found here, on the bootstrap-table online editor.
.search-input:focus
box-shadow: none;
border: 1px solid #ced4da;
1条答案
按热度按时间wj8zmpe11#
使用数据搜索选项创建的输入字段有两个类:
form-control
(它继承了bootstrap样式,因此继承了焦点输入的box-shadow)和search-input
,它可能是bootstrap-table所特有的,因此可以用来覆盖默认行为。注意:请检查页面中是否有其他不希望覆盖默认行为的类。
CSS可能有另一种方式与SASS,但为了这个例子,我认为CSS是最简单和最容易理解的方式,可以使用以下方式。
.search-input:focus
只在聚焦时应用CSS。box-shadow: none;
将删除框阴影。但是,该字段仍将以蓝色勾勒,只是没有阴影。如果需要,则跳过下一行。
如果你想让盒子看起来完全一样,而不管焦点如何,那么假设默认的配色方案没有改变,可以用
border: 1px solid #ced4da;
来设置它来模仿它的非焦点样式。A working example can be found here, on the bootstrap-table online editor.