Search code examples
javascriptcssnewslettersurvey

Input field to the next line with CSS or JavaScript without altering the HTML


I'm working on a Survey and on the system that I work I don't have access to change the HTML directly but I can add CSS or JavaScript to the existing code.

I have the following HTML and I would like the input field to be right underneath the first name. I can only use the ID's as the classes are the same in many other fields that I don't want changing them. I'm a bit stack so if anyone has an idea I would really appreciate..Thanks!

<div id="pnlPersonalDetails2">

</div>
<table cellpadding="0" cellspacing="0" border="0" class="surveyquestions">
  <tbody>
    <tr>
      <td colspan="2" class="pd_question">
        <span id="lbl2"></span>
      </td>
    </tr>
    <tr>
      <td class="pd_label">FIRST NAME<span class="red"> *</span></td>
      <td>
        <input name="Name微statictext_2" type="text" id="Name微statictext_2" class="pd_textbox">
      </td>
      <td class="error_label">
        <span id="ctl03" style="visibility:hidden;">Required Field</span>
      </td>
    </tr>
  </tbody>
</table>

Solution

  • You can use the + selector

    #pnlPersonalDetails2 + .surveyquestions td {
      display:block;
    }
    <div id="pnlPersonalDetails2">
    
    </div>
    <table cellpadding="0" cellspacing="0" border="0" class="surveyquestions">
      <tbody>
        <tr>
          <td colspan="2" class="pd_question">
            <span id="lbl2"></span>
          </td>
        </tr>
        <tr>
          <td class="pd_label">FIRST NAME<span class="red"> *</span></td>
          <td>
            <input name="Name微statictext_2" type="text" id="Name微statictext_2" class="pd_textbox">
          </td>
          <td class="error_label">
            <span id="ctl03" style="visibility:hidden;">Required Field</span>
          </td>
        </tr>
      </tbody>
    </table>
    
    <div id="someId"></div>
    <table cellpadding="0" cellspacing="0" border="0" class="surveyquestions">
      <tbody>
        <tr>
          <td colspan="2" class="pd_question">
            <span id="lbl2"></span>
          </td>
        </tr>
        <tr>
          <td class="pd_label">FIRST NAME<span class="red"> *</span></td>
          <td>
            <input name="Name微statictext_2" type="text" id="Name微statictext_2" class="pd_textbox">
          </td>
          <td class="error_label">
            <span id="ctl03" style="visibility:hidden;">Required Field</span>
          </td>
        </tr>
      </tbody>
    </table>