2

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

1 回答 1

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

于 2013-10-19T00:29:41.753 回答