overflowstack9 overflowstack9 - 4 months ago 8
CSS Question

How to add border to the select tags

I implemented drop down select tags but i want to add the

border
to the tags like the below image.
Just like the below image i want to add the border to the container. Iam unable to identify for which div i want to add the border. Any work would be really appreciable.
border.



<!doctype html>



<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>

<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.default.mobile.min.css" />

<script src="//kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>



<div id="example" role="application" style="float:left;width:49%; margin-right:2%">
<div id="select" class="demo-section k-content">

<h4 style="margin-top: 2em;">select</h4>
<select id="size" placeholder="Select size..." style="width: 140px;" >
<option />easy
<option />to
<option />code
<option />way
<option />always
<option />easily
</select>


</div>
</div>

<div id="example1" role="application" style="float:left;width:49%;margin-right:0;margin-left: -28%;">
<div id="select" class="demo-section k-content">

<h4 style="margin-top: 2em;">select</h4>
<select id="size1" placeholder="Select size..." style="width: 140px;" >
<option />C++
<option />java
<option />jquery
<option />html
<option />css
<option />unix
</select>


</div>
</div>



<div id="example2" role="application" style="float:left;width:49%;margin-right:0;margin-left: -26%;">
<div id="select" class="demo-section k-content">

<h4 style="margin-top: 2em;">select</h4>
<select id="size2" placeholder="Select size..." style="width: 140px;" >
<option />php
<option />framworks
<option />are
<option />good
<option />to
<option />code
</select>


</div>
</div>

<div id="example3" role="application" style="float:right;width:49%;margin-right: -110px;
margin-top: -100px;">
<div id="select" class="demo-section k-content">

<h4 style="margin-top: 2em;">select</h4>
<select id="size3" placeholder="Select size..." style="width: 140px;" >
<option />google
<option />yahoo
<option />are
<option />good
<option />search
<option />engines
</select>


</div>
</div>








<script>
$(document).ready(function() {
// create ComboBox from input HTML element

// create ComboBox from select HTML element
$("#size").kendoComboBox();
$("#size1").kendoComboBox();

$("#size2").kendoComboBox();
$("#size3").kendoComboBox();
var select = $("#size").data("kendoComboBox");
var select = $("#size1").data("kendoComboBox");

var select = $("#size2").data("kendoComboBox");


var select = $("#size3").data("kendoComboBox");


});
</script>





</!doctype>




Answer

Just add a container around all your selects and add a border to it. Check out the snippet!

<!doctype html>


    
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.default.mobile.min.css" />

    <script src="//kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>

<div style="    overflow: hidden;
    border: 1px solid gray;
    padding: 10px;">

        <div id="example" role="application" style="float:left;width:49%; margin-right:2%">
		    <div id="select" class="demo-section k-content">
           
            <h4 style="margin-top: 2em;">select</h4>
            <select id="size" placeholder="Select size..." style="width: 140px;" >
              <option />easy	
              <option />to
              <option />code
              <option />way
              <option />always
              <option />easily
            </select>
     
            
        </div>
</div>
        
<div id="example1" role="application" style="float:left;width:49%;margin-right:0;margin-left: -28%;">
		    <div id="select" class="demo-section k-content">
           
            <h4 style="margin-top: 2em;">select</h4>
            <select id="size1" placeholder="Select size..." style="width: 140px;" >
              <option />C++
              <option />java
              <option />jquery
              <option />html
              <option />css
              <option />unix
            </select>
     
            
        </div>
 </div>



<div id="example2" role="application" style="float:left;width:49%;margin-right:0;margin-left: -26%;">
		    <div id="select" class="demo-section k-content">
           
            <h4 style="margin-top: 2em;">select</h4>
            <select id="size2" placeholder="Select size..." style="width: 140px;" >
              <option />php
              <option />framworks
              <option />are
              <option />good
              <option />to
              <option />code
            </select>
     
            
        </div>
 </div>

<div id="example3" role="application" style="float:right;width:49%;margin-right: -110px;
    margin-top: -100px;">
		    <div id="select" class="demo-section k-content">
           
            <h4 style="margin-top: 2em;">select</h4>
            <select id="size3" placeholder="Select size..." style="width: 140px;" >
              <option />google
              <option />yahoo
              <option />are
              <option />good
              <option />search
              <option />engines
            </select>
     
            
        </div>
 </div>







</div>
            <script>
                $(document).ready(function() {
                    // create ComboBox from input HTML element
                    
                    // create ComboBox from select HTML element
                    $("#size").kendoComboBox();
 $("#size1").kendoComboBox();

 $("#size2").kendoComboBox();
                   $("#size3").kendoComboBox();
					var select = $("#size").data("kendoComboBox");
var select = $("#size1").data("kendoComboBox");

var select = $("#size2").data("kendoComboBox");


var select = $("#size3").data("kendoComboBox");

				
                });
            </script>





</!doctype>

Comments