2016-07-20 48 views
0

ドロップダウンセレクトタグを実装しましたが、下の画像のようにタグにborderを追加します。 ちょうど下の画像のように、私はコンテナーにボーダーを追加したいと思います。 Iamはどの欄に境界線を追加したいのか識別できません。どんな仕事が本当に感知できるでしょう。 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%"> 
 
\t \t  <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 \t 
 
       <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%;"> 
 
\t \t  <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%;"> 
 
\t \t  <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;"> 
 
\t \t  <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(); 
 
\t \t \t \t \t var select = $("#size").data("kendoComboBox"); 
 
var select = $("#size1").data("kendoComboBox"); 
 

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

 

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

 
\t \t \t \t 
 
       }); 
 
      </script> 
 

 

 

 

 

 
</!doctype>

+0

はあなたが絵のようにフルコンテナとの国境をしたいですか以下のように、ドロップダウンコンテナのCSSを変更しますすべての選択は、他のearchに固執していますか? –

+0

@SagarKodte – overflowstack9

+0

のようにこれはすべての解像度でお互いを選択しますか? –

答えて

2

だけですべてのあなたのselectの周りにコンテナを追加し、それに境界線を追加。スニペットをチェックしてください!

<!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%"> 
 
\t \t  <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 \t 
 
       <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%;"> 
 
\t \t  <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%;"> 
 
\t \t  <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;"> 
 
\t \t  <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(); 
 
\t \t \t \t \t var select = $("#size").data("kendoComboBox"); 
 
var select = $("#size1").data("kendoComboBox"); 
 

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

 

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

 
\t \t \t \t 
 
       }); 
 
      </script> 
 

 

 

 

 

 
</!doctype>

+0

@Srijith – overflowstack9

1

ちょうどドロップダウンにコンテナのdivを追加し、

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

+0

イェラも働いていました@イラパ – overflowstack9

関連する問題