display background color for the page & align texts at center

Replace this style and check it

        .career-page-box{
            width: 90%;
            margin: auto;
            background: #fff;
        }
        .career-page-box .page-title {
          margin: 10px 0 0px 0;
          padding: 0;
          clear: both;
        }
        .career-page-box .page-title h1 {
          margin: 0;
          padding: 0 0 8px 0;
          text-align:center;
        }
        .career-page-box .fill-out {
          border-bottom: #ddd solid 1px;
          padding: 0 0 10px 0;
          margin: 0px 0 10px 0;
          text-align: center;
        }
        .career-page-box .form-panel {
          padding: 0;
           text-align:center;
        }
        .career-page-box .form-panel .required {
          margin: 10px 0 8px;
        }
        .career-page-box .form-panel .form-group {
          clear: both;
          width: 49.8%;
          margin:auto;
          text-align:left;
        }
        .career-page-box .form-panel .form-group  label{
          text-align:left !important;
        }
        .career-page-box .form-panel .form-group .form-list li {
          float: left;
          width: 100%;
        }
        .career-page-box .form-panel .form-group .form-list li label {
          line-height: 30px;
          padding-right: 30px;
        }
        .career-page-box .form-panel .form-group .form-list li label em {
          color: #df280a;
          margin: 0 0 0 2px;
          font-style: normal;
        }
        .career-page-box .form-panel .form-group .custom-select {
          float: left;
          width: 100%;
          margin: 0 0px 0 0;
          background-position: 98% 50%;
        }
        .career-page-box .form-panel .form-group .custom-select select {
          margin-top: 0;
        }
        .career-page-box .form-panel .buttons-set {
          clear:both;
          border-top: 0;
        }
        .career-page-box .form-panel .buttons-set button.button {
    
        }
    
        .custom-select {
          border: 1px solid #ccc!important;
          width: 120px;
          height: 30px;
          overflow: hidden;
          background: #fff url("../images/custom-select-downarrow.png") no-repeat 95% 50%;
        }
        .arrow-up {
          background: transparent url("../images/arrow-up-white.png") no-repeat scroll 0 0;
          height: 15px;
          width: 25px;
          position: absolute;
          right: 25px;
          top: -15px;
        }
        .custom-select select {
          padding: 5px 8px!important;
          width: 100%;
          border: none;
          box-shadow: none;
          background: transparent;
          background-image: none;
          -webkit-appearance: none;
          -moz-appearance: none;
          appearance: none;
        }
        input[type=email],
        input[type=search],
        input[type=number],
        input[type=password],
        input[type=tel],
        input[type=text] {
          width: 100%;
          max-width: 100%;
        }
        input[type=email],
        input[type=search],
        input[type=number],
        input[type=password],
        input[type=tel],
        input[type=text] {
          height: 32px;
          padding: 0 8px;
          border: 1px solid #d1d1d1;
          background: #FFFFFF;
          font-size: 13px;
        }
        .careercv
        {
          padding-top: 10px;
        }
    
    <div class="career-page-box">
      <div class="page-title career-title">
        <h1><?php echo $this->__('Career') ?></h1>
      </div>
      <?php $careerForm=Mage::getSingleton('core/session')->getFormData();?>
      <form action="<?php echo mage::getUrl('career/index/save'); ?>" id="carrer_form" method="post" name="carrer_form" enctype="multipart/form-data">
        <div class="fill-out"></div>
        <div class="form-panel">
          <div class="inner-panel">
            <p class="required"><?php echo $this->__('Required Fields') ?><em>*</em></p>
            <div class="form-group">
              <ul class="form-list">
                <li>
                  <label for="jobtitle"><?php echo $this->__('How did you hear about us') ?><em>*</em></label>
                  <div class="custom-select">
                    <select name="jobtitle" id="jobtitle" class="validate-select form-control required-entry">
                      <option value="">Please Select</option>
                      <option value="NewsPaper" <?php if($careerForm['jobtitle']=="NewsPaper"){
                  ?>selected="selected"<?php } ?>>NewsPaper</option>
                      <option value="onlinsite" <?php if($careerForm['jobtitle']=="onlinsite"){?>selected="selected"<?php } ?>>Online Website</option>
                      <option value="Friends" <?php if($careerForm['jobtitle']=="Friends"){?>selected="selected"<?php } ?>>Friends</option>
                    </select>
                  </div>
                </li>
                <li>
                  <label for="jobtitle"><?php echo $this->__('Job Type') ?><em>*</em></label>
                  <?php  $jobs=Mage::getStoreConfig('career/career/job_list');
               if($jobs!='')
               $jobsselected=explode(",",$jobs);
             else
              $jobsselected='';
    
               ?>
                  <div class="custom-select">
                    <select name="job" id="job" class="form-control required-entry">
                      <option value=""> Please Select </option>
                      <?php foreach($jobsselected as $jobs): ?>
                      <option value="<?php echo $jobs ?>"> <?php echo $jobs; ?> </option>
                      <?php endforeach; ?>
                    </select>
                  </div>
                </li>
              </ul>
            </div>
            <div class="form-group">
              <ul class="form-list">
                <li>
                  <label for="firstname"><?php echo $this->__('First Name') ?><em>*</em></label>
                  <input name="fname" class="form-control required-entry"  size="45" type="text" placeholder="<?php echo $this->__('') ?>" value="<?php echo $careerForm['fname'];?>"/>
                </li>
                <li>
                  <label for="lastname"><?php echo $this->__('Last Name') ?><em>*</em></label>
                  <input name="lname" class="form-control required-entry"  size="45" type="text" placeholder="<?php echo $this->__('') ?>" value="<?php echo $careerForm['lname'];?>"/>
                </li>
              </ul>
            </div>
            <div class="form-group">
              <ul class="form-list">
                <li>
                  <label for="emailaddress"><?php echo $this->__('Email address') ?><em>*</em></label>
                  <input name="email_address" placeholder="<?php echo $this->__('') ?>" class="form-control required-entry validate-email" type="text" value="<?php echo $careerForm['email_address'];?>"/>
                </li>
              </ul>
            </div>
            <div class="form-group">
              <ul class="form-list">
                <li>
                  <label for="telephonenumber"><?php echo $this->__('Telephone Number') ?><em>*</em></label>
                  <input name="phone" class="form-control required-entry validate-number" type="text" value="<?php echo $careerForm['phone'];?>" />
                </li>
              </ul>
            </div>
            <div class="form-group">
              <ul class="form-list">
                <li>
                  <label for="cv"><?php echo $this->__('Upload Your Cv') ?><em>*</em></label>
                  <input name="cv" class="form-control required-file careercv" type="file" />
                </li>
              </ul>
            </div>
            <div class="buttons-set">
              <button class="button" title="<?php echo $this->__('Submit Your Cv'); ?>" type="submit"><span><span><?php echo $this->__('Submit Cv') ?></span></span></button>
            </div>
          </div>
        </div>
      </form>
      <script type="text/javascript">
    //<![CDATA[
       var carrerForm = new VarienForm('carrer_form', true);
    //]]>
    </script>
    </div>

Leave a Comment