javascript - 如何更改引导标签输入的样式
问题描述
我有一个带有引导标签输入的输入字段,问题是当标签被激活时我没有标签框。
我想要这样的东西:
显示标签 python 和 java 是通过创建一个小框来激活的。
我在我的例子中使用了这种风格:
<style>
.bootstrap-tagsinput {
background-color: #fff;
border: 1px solid #ccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
display: inline-block;
padding: 4px 6px;
color: #555;
vertical-align: middle;
border-radius: 4px;
max-width: 100%;
line-height: 22px;
cursor: text;
}
.bootstrap-tagsinput input {
border: none;
box-shadow: none;
outline: none;
background-color: transparent;
padding: 0 6px;
margin: 0;
width: auto;
max-width: inherit;
}
.bootstrap-tagsinput.form-control input::-moz-placeholder {
color: rgb(170, 36, 36);
opacity: 1;
}
.bootstrap-tagsinput.form-control input:-ms-input-placeholder {
color: #777;
}
.bootstrap-tagsinput.form-control input::-webkit-input-placeholder {
color: #777;
}
.bootstrap-tagsinput input:focus {
border: none;
box-shadow: none;
}
.bootstrap-tagsinput .tag {
margin-right: 2px;
color: black;
}
.bootstrap-tagsinput .tag [data-role="remove"] {
margin-left: 8px;
cursor: pointer;
}
.bootstrap-tagsinput .tag [data-role="remove"]:after {
content: "x";
padding: 0px 2px;
}
.bootstrap-tagsinput .tag [data-role="remove"]:hover {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.bootstrap-tagsinput .tag [data-role="remove"]:hover:active {
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
</style>
解决方案
我通过添加这个解决了我的问题:
.bootstrap-tagsinput .tag {
background: gray;
border: 1px solid black;
padding: 0 6px;
margin-right: 2px;
color: white;
border-radius: 4px;
}
推荐阅读
- java - Hadoop:Reduce 阶段开始:FileNotFoundException 输出/file.out.index 不存在
- python - 提高函数定义的可读性
- neo4j - 高效获取节点的所有关系类型
- java - 在休眠类别中创建产品 - Transcient 问题
- matlab - 从单元格中查找独特的月-年组合
- image - ASP.NET Core:从外部站点获取图像并保存在服务器上
- sap-cloud-sdk - SAP Cloud SDK Spring 安全 JARS
- grafana - Graphite / Grafana:如何在查询中修改指标的分辨率?
- sql-server - Laravel如何创建流畅的查询生成器加入子查询
- android - Dialogflow 发送用户数据