textarea将始终禁用

Question

我正在开发一个php/mysqli私有消息系统。我正在为我的私人消息系统复制此设计。

我不是这个代码的编码者，我只是为了我的需要而修改它。

你可以看到它在这里工作。

http://codepen.io/jcoulterdesign/pres/GgGrQO

在给定的链接上可以看到完整的css和html。

<div class='title'>
  <div class='title_inner'>
    <h1>
      Funky fresh inbox UI
    </h1>
    <h2>
      Just messing around with some concepts for a UI... and this is what i ended up with! Pure css goodness!
    </h2>
  </div>
</div>
<div class='container'>
  <div class='container_ui'>
    <div class='container_ui__heading'>
      <div class='header_icon'>
        <img src='http://www.jamiecoulter.co.uk/dev/codepen/mail.png'>
      </div>
      <h1>
        inbox
      </h1>
      <div class='menu_icon'>
        <div class='div'></div>
        <div class='div'></div>
        <div class='div'></div>
      </div>
    </div>
    <input id='message-1' type='checkbox'>
    <label for='message-1' href='#move'>
      <div class='container_ui__item'>
        <div class='face'>
          <img src='https://s3.amazonaws.com/uifaces/faces/twitter/rem/128.jpg'>
          <div class='color_bar one'>
            <p>Now Reading</p>
            <span>Read</span>
          </div>
        </div>
        <h2>
          aspca
        </h2>
        <div class='dot active'></div>
        <h3>subj: thanks, you are amazing</h3>
        <h4>Your generous donation saved 3 million puppies...</h4>
      </div>
      <div class='container_ui__expand' id='close'>
        <div class='heading'>
          <div class='heading_head'></div>
          <label for='message-1'>
            x
          </label>
        </div>
        <div class='body'>
          <div class='user'>
            <div class='face'>
              <img src='https://s3.amazonaws.com/uifaces/faces/twitter/rem/128.jpg'>
            </div>
            <div class='details'>
              <h2>aspca</h2>
              <h3>subj: thanks you are amazing</h3>
            </div>
          </div>
          <div class='content'>
            <p><b>Email text</b></br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et commodo ipsum, ut rhoncus velit. Nullam placerat, ipsum sed pretium varius, magna metus ullamcorper magna, at porta quam libero ut est. Mauris cursus in magna in fermentum. Integer mollis convallis quam, vel dignissim ligula rutrum in.<br/><br/>Pellentesque ut purus porta, gravida tellus et, consectetur massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque egestas convallis urna. Aenean commodo leo eget felis rhoncus blandit. Nam sed odio sed augue lobortis rutrum non vel est..</p>
            <span>Reply:</span>
            <textarea></textarea>
          </div>
        </div>
      </div>
    </label>
    <input id='message-2' type='checkbox'>
    <label for='message-2'>
      <div class='container_ui__item'>
        <div class='face'>
          <img src='https://s3.amazonaws.com/uifaces/faces/twitter/boheme/128.jpg'>
          <div class='color_bar two'>
            <p>Now Reading</p>
            <span>Read</span>
          </div>
        </div>
        <h2>Nobel prize foundation</h2>
        <div class='dot'></div>
        <h3>subj: Your paper on molecular fusion</h3>
        <h4>We are awarding you the nobel...</h4>
      </div>
      <div class='container_ui__expand'>
        <div class='heading two'>
          <div class='heading_head'>
            <label for='message-2'>
              x
            </label>
          </div>
        </div>
        <div class='body'>
          <div class='user'>
            <div class='face'>
              <img src='https://s3.amazonaws.com/uifaces/faces/twitter/boheme/128.jpg'>
            </div>
            <div class='details'>
              <h2>Nobel prize foundation</h2>
              <h3>subj: Your paper on molecular</h3>
            </div>
          </div>
          <div class='content'>
            <p><b>Email text</b></br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et commodo ipsum, ut rhoncus velit. Nullam placerat, ipsum sed pretium varius, magna metus ullamcorper magna, at porta quam libero ut est. Mauris cursus in magna in fermentum. Integer mollis convallis quam, vel dignissim ligula rutrum in.<br/><br/>Pellentesque ut purus porta, gravida tellus et, consectetur massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque egestas convallis urna. Aenean commodo leo eget felis rhoncus blandit. Nam sed odio sed augue lobortis rutrum non vel est..</p>
            <span>Reply:</span>
            <textarea></textarea>
          </div>
        </div>
      </div>
    </label>
    <input id='message-3' type='checkbox'>
    <label for='message-3'>
      <div class='container_ui__item'>
        <div class='face'>
          <img src='https://s3.amazonaws.com/uifaces/faces/twitter/alexmarin/128.jpg'>
          <div class='color_bar three'>
            <p>Now Reading</p>
            <span>Read</span>
          </div>
        </div>
        <h2>megan fox</h2>
        <div class='dot active'></div>
        <h3>subj: i miss you</h3>
        <h4>Where have you been? I've been trying to call you...</h4>
      </div>
      <div class='container_ui__expand'>
        <div class='heading three'>
          <div class='heading_head'>
            <label for='message-3'>
              x
            </label>
          </div>
        </div>
        <div class='body'>
          <div class='user'>
            <div class='face'>
              <img src='https://s3.amazonaws.com/uifaces/faces/twitter/alexmarin/128.jpg'>
            </div>
            <div class='details'>
              <h2>megan fox</h2>
              <h3>subj: i miss you</h3>
            </div>
          </div>
          <div class='content'>
            <p><b>Email text</b></br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et commodo ipsum, ut rhoncus velit. Nullam placerat, ipsum sed pretium varius, magna metus ullamcorper magna, at porta quam libero ut est. Mauris cursus in magna in fermentum. Integer mollis convallis quam, vel dignissim ligula rutrum in.<br/><br/>Pellentesque ut purus porta, gravida tellus et, consectetur massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque egestas convallis urna. Aenean commodo leo eget felis rhoncus blandit. Nam sed odio sed augue lobortis rutrum non vel est..</p>
            <span>Reply:</span>
            <textarea></textarea>
          </div>
        </div>
      </div>
    </label>
    <input id='message-4' type='checkbox'>
    <label for='message-4'>
      <div class='container_ui__item'>
        <div class='face'>
          <img src='https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg'>
          <div class='color_bar four'>
            <p>Now Reading</p>
            <span>Read</span>
          </div>
        </div>
        <h2>Linkedin</h2>
        <div class='dot active'></div>
        <h3>subj: Message from bill gates</h3>
        <h4>I want to add you to my personal network...</h4>
      </div>
      <div class='container_ui__expand'>
        <div class='heading four'>
          <div class='heading_head'>
            <label for='message-4'>
              x
            </label>
          </div>
        </div>
        <div class='body'>
          <div class='user'>
            <div class='face'>
              <img src='https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg'>
            </div>
            <div class='details'>
              <h2>Linkedin</h2>
              <h3>Message from bill gates</h3>
            </div>
          </div>
          <div class='content'>
            <p><b>Email text</b></br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et commodo ipsum, ut rhoncus velit. Nullam placerat, ipsum sed pretium varius, magna metus ullamcorper magna, at porta quam libero ut est. Mauris cursus in magna in fermentum. Integer mollis convallis quam, vel dignissim ligula rutrum in.<br/><br/>Pellentesque ut purus porta, gravida tellus et, consectetur massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque egestas convallis urna. Aenean commodo leo eget felis rhoncus blandit. Nam sed odio sed augue lobortis rutrum non vel est..</p>
            <span>Reply:</span>
            <textarea></textarea>
          </div>
        </div>
      </div>
    </label>
    <input id='message-5' type='checkbox'>
    <label for='message-5'>
      <div class='container_ui__item'>
        <div class='face'>
          <img src='https://s3.amazonaws.com/uifaces/faces/twitter/allisongrayce/128.jpg'>
          <div class='color_bar five'>
            <p>Now Reading</p>
            <span>Read</span>
          </div>
        </div>
        <h2>Jesse pinkman</h2>
        <div class='dot'></div>
        <h3>subj: Let's get together sometime yo!</h3>
        <h4>Hey, how's it going? You free at all this weekend...</h4>
      </div>
      <div class='container_ui__expand'>
        <div class='heading five'>
          <div class='heading_head'>
            <label for='message-5'>
              x
            </label>
          </div>
        </div>
        <div class='body'>
          <div class='user'>
            <div class='face'>
              <img src='https://s3.amazonaws.com/uifaces/faces/twitter/allisongrayce/128.jpg'>
            </div>
            <div class='details'>
              <h2>Jesse pinkman</h2>
              <h3>subj: Let's get together sometime yo!</h3>
            </div>
          </div>
          <div class='content'>
            <p><b>Email text</b></br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et commodo ipsum, ut rhoncus velit. Nullam placerat, ipsum sed pretium varius, magna metus ullamcorper magna, at porta quam libero ut est. Mauris cursus in magna in fermentum. Integer mollis convallis quam, vel dignissim ligula rutrum in.<br/><br/>Pellentesque ut purus porta, gravida tellus et, consectetur massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque egestas convallis urna. Aenean commodo leo eget felis rhoncus blandit. Nam sed odio sed augue lobortis rutrum non vel est..</p>
            <span>Reply:</span>
            <textarea></textarea>
          </div>
        </div>
      </div>
    </label>
    <input id='message-6' type='checkbox'>
    <label for='message-6'>
      <div class='container_ui__item'>
        <div class='face'>
          <img src='https://s3.amazonaws.com/uifaces/faces/twitter/kolage/128.jpg'>
          <div class='color_bar six'>
            <p>Now Reading</p>
            <span>Read</span>
          </div>
        </div>
        <h2>James cameron</h2>
        <div class='dot active'></div>
        <h3>subj: avatar 2</h3>
        <h4>Please consider writing the script...</h4>
      </div>
      <div class='container_ui__expand'>
        <div class='heading six'>
          <div class='heading_head'>
            <label for='message-6'>
              x
            </label>
          </div>
        </div>
        <div class='body'>
          <div class='user'>
            <div class='face'>
              <img src='https://s3.amazonaws.com/uifaces/faces/twitter/kolage/128.jpg'>
            </div>
            <div class='details'>
              <h2>James cameron</h2>
              <h3>subj: avatar 2</h3>
            </div>
          </div>
          <div class='content'>
            <p><b>Email text</b></br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et commodo ipsum, ut rhoncus velit. Nullam placerat, ipsum sed pretium varius, magna metus ullamcorper magna, at porta quam libero ut est. Mauris cursus in magna in fermentum. Integer mollis convallis quam, vel dignissim ligula rutrum in.<br/><br/>Pellentesque ut purus porta, gravida tellus et, consectetur massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque egestas convallis urna. Aenean commodo leo eget felis rhoncus blandit. Nam sed odio sed augue lobortis rutrum non vel est..</p>
            <span>Reply:</span>
            <textarea></textarea>
          </div>
        </div>
      </div>
    </label>
  </div>
</div>

我有两个问题，我一个人解决不了

1. <textarea>或我放置的任何其他输入字段都会被禁用。
2. 现在，读/读只显示第一个字段/消息，当与php/mysqli一起使用时，数据被动态填充。

对于这两个问题，我看不出css或html有什么问题。你们能帮我解决这两个问题吗？

Answer 1

我看了你的代码，认为这是因为它的结构方式。基本上，如果您查看DOM，.container_ui就在右侧框的前面，阻止任何用户交互。

您可以通过以下方法将其向前推进，从而解决这一问题：

position:relative;
z-index: <number>;

试着右键单击文本区域，然后单击检查元素(铬)。它不能使用文本区域，因为它被另一个div阻塞了。