Match width of select menu with text input field - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Menu

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Menu

Description

Match width of select menu with text input field

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
.green_background
 {
   background-color:Chartreuse;
}

.ui-grid-a label
 {
   font-weight:normal ;
}

.ui-grid-a input
 {
   color:yellow;
   background-color:blue;
   border:3px solid pink;
   font-weight:normal ;
}

.ui-grid-a .narrow
 {
   float:left;
   width:31%;
   padding-top:8px;
}

.ui-grid-a .wide<!--from w w w  . j  a v a 2  s.co m-->
 {
   float:left;
   width:66%;
}

.wide .ui-select .ui-btn
 {
   background:OrangeRed;
   border:3px solid grey;
   color:BlueViolet;
   font-weight:normal;
}

select {
   background:black;
   border:3px solid Chartreuse;
   color:yellow;
   padding:3px;
   width:124px;
}
</style> 
 </head> 
 <body> 
  <div class="green_background"> 
   <fieldset class="ui-grid-a"> 
    <div class="ui-block-a narrow"> 
     <label for="first">Lorem ipsu</label> 
    </div> 
    <div class="ui-block-b wide"> 
     <input name="first" id="first" data-mini="true"> 
    </div> 
   </fieldset> 
   <fieldset class="ui-grid-a"> 
    <div class="ui-block-a narrow"> 
     <label for="last">Lorem ips</label> 
    </div> 
    <div class="ui-block-b wide"> 
     <input name="last" id="last" data-mini="true"> 
    </div> 
   </fieldset> 
   <fieldset class="ui-grid-a"> 
    <div class="ui-block-a narrow"> 
     <label for="select-choice-1" class="select">Lorem ip</label> 
    </div> 
    <div class="ui-block-b wide"> 
     <select name="select-choice-1" id="select-choice-1" data-mini="true"> <option value="standard">Lorem ipsum dol</option> <option value="rush">Lorem ipsum </option> <option value="express">Lorem ipsum dolor</option> <option value="overnight">Lorem ips</option> </select> 
    </div> 
   </fieldset> 
  </div>  
 </body>
</html>

Related Tutorials