javascript - 为特定部分重建 css 并在需要时应用 jquery

Question

我正在尝试做一些 css 增强，我需要改变它的显示方式，所以这是在外部页面上

这是网址:

<div class="group_l"><label>Area</label><br><select>

这是相关的 CSS:

.group_l
    {
        display: inline-block;
        padding-bottom: 0px;
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 0px;
        text-align: left;
    }

现在显示为:

Area
{select field}

我希望它显示为:

Area: {select Field}

我知道有
标签，我想我们可以用 jquery 或 css 删除，无论是什么方法，我都想用那个

并在 Area 之后应用 :

还有一件事:我的选择显示了所有选择的 150px; 宽度，我怎样才能让它根据选项数据动态就像选项数据一样包含 1,2,3,4 。它应该只有那个宽度

谢谢

Answer 1

这是一个code pen我认为你正在寻找的东西。

.group_l {
  display: inline-block;
  padding-bottom: 0px;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 0px;
  text-align: left;
}
.group_l br {
  display: none;
}
.group_l label:after {
  content: ": ";
}