Question

我正在尝试修改多选的CSS。我在Chrome上的结果还不错，但我无法让它在Mozilla上运行。选项上的浮动使其占据全宽。因为这里很难描述这就是我想要做的事情：

＆＃13;

Task Middleware(IOwinContextcontext, Func<Task> next)
{
    Console.WriteLine("test");
    return next();
}

app.Use(Middleware);

＆＃13;

$('option').mousedown(function(e) {
    e.preventDefault();
    $(this).prop('selected', !$(this).prop('selected'));
    return false;
});

＆＃13;

  select[multiple='true'] option{
      float:left;
      border: solid 1px #71aa29;
      padding: 5px;
      margin: 2px;
      transition:0.2s ease;
      cursor:pointer;
  }

  select[multiple='true']{
    border:none;
    outline: none;
    width:100%;
    height:200px;
    overflow:hidden;
  }

  select[multiple='true']>option:checked, select[multiple='true']>option:hover {
    background: #71aa29 linear-gradient(0deg, #71aa29 0%, #71aa29 100%);
    color:#ffffff;
  }

＆＃13;

我很乐意提出任何建议。谢谢。

Answer 1

如果我理解正确，我认为以下内容可以为您提供所需内容。

select[multiple='true'] option{
    display: inline-block; /* no float inline-block instead */
    border: solid 1px #71aa29;
    padding: 5px;
    margin: 2px;
    transition:0.2s ease;
    cursor:pointer;
}

在Mozilla上使用float的多选项和CSS样式

1 个答案: