테두리 스타일 선택 도구 만들기

Question

테두리 스타일의 드롭 다운 목록을 html 형식 (점선/점선/단색 ..)으로 만들려고합니다.

요청한 동작은 드롭 다운이 닫히면 선택한 테두리 스타일이 나타나고 열면 선택한 옵션이 표시된다는 것입니다.

가능한 경우 기본 선택에 스타일을 추가하는 것이 가장 좋은 방법입니다. 그래서 그것은 옵션 요소로서 이미지의 순진한 해결책으로 이끌었습니다. 그러나 CSS를 사용하여 얻을 수있는 것이 더 나은지 궁금합니다.

부트 스트랩을 사용하여 만들었지 만 부트 스트랩 드롭 다운이 버튼을 통해 열리 며 "선택 항목 표시"요구 사항이 손실됩니다.

Answer 1

당신이 시도 할 수 있습니다 :

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;}

<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>

링크 : - http://www.w3schools.com/css/css_border.asp

Answer 2

그것은 여기 조금 복잡하지만 것은이 codepen 일하고 : http://codepen.io/krabbypattified/pen/pEBAgP

는 그것은을 사용 맞춤 드롭 다운을하고 HTML5 드롭 다운에 값을 전달합니다 (wh ich 당신은 숨길 수 있습니다)

만약 당신이 질문이 있으면 내가 그에 따라 내 대답을 수정하겠습니다.

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