Setting width of select and input elements in css

Question

I'm new to learning CSS/HTML (and to this site!) and am trying to design some basic input fields as practice.

I've managed to set up a few things but am really struggling to set specific width of input/select fields (px is fine but % would be better) using CSS. I am guessing its some kind of specificity issue but just can't figure it out. Help would be greatly appreciated.

<!DOCTYPE html>
<head>
<style type="text/css">
.generalcontainer {
    width:65%;
    margin:5%;
    height:600px;
    float:left;
    background-color: #CCCCCC;
}   
.generalcontainer > span {
    font-family: Calibri;
    font-size: 14px;
    padding: 4px;
}  
.generalcontainer > span.header {
    font-weight: bold;
    color: #fff;
    background-color: blue;
    display: block;
} 
.generalcontainer > span.subheader {
    background-color: gray;
    display: block;
    color: #000000;
    font-weight: bold;
}   
.generalcontainer > span.label {
    color: #000000;
    font-weight: normal;
    display: inline-block;
    width:25%;
}  
.smallentryfield > select input{
    color: #000000;
    font-weight: bold;  
    width: 500px;
    float: left;
    padding: 4px;
}  
</style>
</head>

<body>
<div class="generalcontainer"> 
<span class="header">Basic Information</span> 
<span class="subheader">Client</span> 
<span class="label">First name</span>
  <select class="smallentryfield">
    <option value=""></option>
    <option selected="selected" value="Mr">Mr</option>
    <option value="Mrs">Mrs</option>    
  </select>
  <span class="label">First name</span>
  <input type="text">
  </input>
</div>
</body>
</html>

Community · Accepted Answer · 2017-05-23 11:43:33Z

1

Your select input CSS selection was almost there, but for yours, it was looking for:

/**
 *  Find class of .smallentryfield,
 *      child element of .smallentryfield ( The: > )
 *         find <select> (with .smallentryfield as parent)
 *            find input (with <select> as parent)
**/
.smallentryfield > select input {
   //..
}

Despite it went through the whole selection process above, the trouble is - it will only modify and select the <input> at the end of the chain. Instead:

/**
 *  Find a <select> class with .smallentryfield
 *    or (Hence the , )
 *  Find an <input> with a parent of .genercontainer
**/
 select.smallentryfield, .generalcontainer input {
     color: #000000;
     font-weight: bold;  
     width: 97%;
     float: left;
     padding: 4px;
 }

Fiddle: http://jsfiddle.net/TnQky/1/

You may also notice in the Fiddle the <select> and the <input> are different widths, you can adjust this with box-sizing:content-box; on the <select> element

edited May 23, 2017 at 11:43

CommunityBot

11 silver badge

answered Oct 19, 2013 at 0:29

MackieeE

11.9k4 gold badges41 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Winters Over a year ago

That fixes that issue perfectly - I went a bit overboard with the > tags. I now have a new issue - the second input field doesn't quite fit the row. I've tried removing padding, borders, trying the box-sizing tags but still can't get it to work. I've made a jsfiddle of progress jsfiddle.net/ZxRAu (how cool is that site!?). Sorry to be a pain - any help appreciated again.

Collectives™ on Stack Overflow

Setting width of select and input elements in css

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related