0

プロジェクトにBootstrap 4石積みカードレイアウトを使用していますが、そのプロジェクト内に<select>はカスタムスタイルがあります。カスタム スタイルの一部は、CSS を使用して作成されたキャレット:afterです。ブラウザーが異なれば結果も異なります。誰かが解決策を持っている場合に備えて、ここに投稿したいと思いました。これが Bootstrap の問題なのか CSS 仕様の問題なのかはわかりません。

  • Chrome Canary: すべて問題ないようです
  • Chrome: 最初の列は問題ないように見えますが、最初の列以降の列は悪く見えます。モバイルに移動しない限り (ここでは 1 列のみに設定しています)、そこには問題なく表示されます。複数の列がある場合のみです。
  • Firefox: すべて問題ありません
  • Safari: 最初の列が表示されますが、最初の列の後の列はキャレットとテキストが表示されません。

Codepen のリンクは次のとおりです: http://codepen.io/derekshull/pen/GZQaRY

.select-fancy {
  display: inline-block;
  border: 1px solid #bac2c6;
  position: relative;
  padding: 5px 10px;
  border-radius: 20px;
  width: 100%;
  overflow: hidden;
  color: #656565;
  box-shadow: inset 0 -2px 5px rgba(255, 255, 255, 0.4);
  background: #eee;
}

.select-fancy,
.select-fancy > * {
  cursor: pointer;
}

.select-fancy select {
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  background: transparent;
  border: 0;
  outline: 0;
  text-shadow: 1px 1px rgba(255, 255, 255, 0.7);
  font-size: 14px;
  width: calc(100% - 23px);
  -webkit-user-select: none;
  -moz-user-select: -moz-none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  -moz-appearance: radio-container;
  appearance: none;
  float: left;
  padding-left: 5px;
}

.select-fancy:after {
  content: '';
  display: block;
  white-space: nowrap;
  position: absolute;
  width: 0;
  height: 0;
  right: 11px;
  top: 50%;
  margin-top: -4px;
  border-width: 8px 6px;
  border-style: solid;
  pointer-events: none;
  border-color: #656565 transparent transparent transparent;
}

.select-fancy img {
  width: 17px;
  height: 17px;
  float: left;
  margin-top: 1px;
}

@media (max-width: 595px) {
	.card-columns {
		-webkit-column-count: 1;
        -moz-column-count: 1;
    	column-count: 1;
	}
}

@media (min-width: 596px) and (max-width: 991px) {
	.card-columns {
		-webkit-column-count: 2;
        -moz-column-count: 2;
    	column-count: 2;
	}
}
<section class="card-columns">
  <div class="card card-block">
      <h2 class="card-title"><a href="#">Card Title</a></h2>
      <p class="card-text"></p>
      <fieldset class="clearfix">
        <div class="select-fancy">
          <select class="urlSelect" data-projectid="12">
            <option value="Homepage">Homepage</option>
            <option value="Board Members">Board Members</option>
            <option value="Events">Events</option>
          </select>
        </div>
      </fieldset>
  </div>
  <div class="card card-block">
      <h2 class="card-title"><a href="#">Card Title</a></h2>
      <p class="card-text"></p>
      <fieldset class="clearfix">
        <div class="select-fancy">
          <select class="urlSelect" data-projectid="12">
            <option value="Homepage">Homepage</option>
            <option value="Board Members">Board Members</option>
            <option value="Events">Events</option>
          </select>
        </div>
      </fieldset>
  </div>
  <div class="card card-block">
      <h2 class="card-title"><a href="#">Card Title</a></h2>
      <p class="card-text"></p>
      <fieldset class="clearfix">
        <div class="select-fancy">
          <select class="urlSelect" data-projectid="12">
            <option value="Homepage">Homepage</option>
            <option value="Board Members">Board Members</option>
            <option value="Events">Events</option>
          </select>
        </div>
      </fieldset>
  </div>
</section>

4

1 に答える 1

0

どうやらoverflow:hidden;を削除しています。すべてを修正します。それがそれをするのは奇妙です。なぜそれが起こったのかについてはまだ興味があります。

于 2016-04-12T17:09:53.853 に答える