Question

我试图以html格式创建边框样式的下拉列表（虚线/点缀/实体..）。

请求的行为是关闭下拉列表时将显示所选的边框样式，打开时，将标记所选的选项。

最好的方法是在本机选择上添加样式，如果可能的话。所以它让我把图像的天真解决方案作为选项元素，但我想知道是否有更好的东西可以用css实现。

我尝试使用bootstrap来创建它，但是通过按钮打开bootstrap下拉列表，然后我输掉了＃34; show selected＆＃34;要求。

Answer 1

你可以试试这个：

＆＃13;

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

＆＃13;

<p>This property specifies what kind of border to display:</p>

<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>

＆＃13;

链路： - http://www.w3schools.com/css/css_border.asp

Answer 2

这有点复杂，但这是一个有效的代码： http://codepen.io/krabbypattified/pen/pEBAgP

它使用自定义下拉列表并将值传递给HTML5下拉列表（您可以隐藏）

如果您有疑问，请告诉我，我会相应地修改我的答案。

HTML

<div class="dropdown">
<button onclick="showHide()" class="dropbtn">Dropdown</button>
  <div id="borderList">
    <!--  See CSS  -->
    <p><span></span></p>
    <p><span></span></p>
    <p><span></span></p>
    <p><span></span></p>
  </div>
</div>

<form>
   <select id="selector">
     <option value="solid">This form will be hidden.</option>
      <option value="dashed">Dashed (words not required here, just values)</option>
      <option value="dotted" />
      <option value="double" />
      <option value="groove" />
   </select>
</form>

SCSS

/* Border styles */
$borders: solid, dashed, dotted, double, groove;

#borderList p span {
  border-top: 5px solid black;
  display: block;
}

@for $i from 1 through length($borders) {
  #borderList p:nth-child(#{$i}) span {
    border-top-style: nth($borders, $i);
    }
}



/* Dropdown styles */
.hide { display: none !important }
.show { display: block !important }

.dropdown {
  position: relative;
  display: inline-block;
}

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  &:hover, &:focus { background-color: #3e8e41 }
}

#borderList {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 110px;
  box-shadow: 0px 8px 5px 0px rgba(0, 0, 0, 0.2);

  p {
    cursor: pointer;
    margin: 0;
    height: 0;
    padding: 18px 0 24px 0;
    &:hover { background-color: #ddd }
  }
}

JS

// Added jQuery

// Pass the selected option to a hidden form
$('#borderList').children().each(function(index) {
  this.addEventListener('click', function(){syncToForm(index)});
});
function syncToForm(index) {
  var selector = document.getElementById("selector");
  selector.options.selectedIndex = index;
}


// Toggle show/hide dropdown
function showHide() {
  $('#borderList').toggleClass('show');
}



// Close the dropdown if clicked elsewhere on page
window.onclick = function(e) {
  if (!e.target.matches('.dropbtn') && $('#borderList').hasClass('show')) {
    $('#borderList').removeClass('show');
  }
}

Answer 3

谢谢大家，我找到了我要找的东西（用缩略图选择）： http://thdoan.github.io/bootstrap-select/examples.html

创建边框样式选择器

3 个答案: