Reputation: 345

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

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

Upvotes: 1

Answers (2)

Irannabi

Reputation: 139

Just add container div to dropdowns and change the dropdown container css as in below

<!doctype html>



<style>
    html {
        font-size: 14px;
        font-family: Arial, Helvetica, sans-serif;
    }
    .container{
            border: 1px solid #ddd;
    display: inline-block;
    padding: 10px 30px 50px 30px;
    }
</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 class="container">
    <div id="example" role="application" style="float:left; margin-right:10px">
        <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;margin-right:10px;">
        <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;margin-right:10px;">
        <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:left;margin-right:10px;">
        <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>

Upvotes: 2

Srijith

Reputation: 1444

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>

Upvotes: 3

How to add border to the select tags

Answers (2)

Related Questions