Creating a border style picker - html

Question

I'm trying to create a dropdown list of border styles in an html form (dashed/dotted/solid..).
The requested behavior is that the border-style that was selected would appear when the dropdown is closed, and when opened, the selected option will be marked.
The best way was to add styling on a native select, if that was possible. So it led me to the naive solution of images as the options element, but I was wondering if there was anything better that could be achieved using css.
I tried using bootstrap in order to create it, but bootstrap dropdown opens through a button, and then I lose the "show selected" requirement.

Answer 1

You can try this:
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>
link:-http://www.w3schools.com/css/css_border.asp

Answer 2

It's a bit complicated, but here's a working codepen:
http://codepen.io/krabbypattified/pen/pEBAgP
It uses a custom-made dropdown and passes values to an HTML5 dropdown (which you can hide)
Let me know if you have questions and I'll revise my answer accordingly.
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

Thanks everyone, I found what I was looking for (select with thumbnails):
http://thdoan.github.io/bootstrap-select/examples.html