表单中不可编辑的输入字段

Question

我有一个简单的表单，但是，出于某种奇怪的原因，该表单只允许我点击并输入菜单下方的 inputs！

我知道下面的代码片段在 css 和 Js 方面无处不在，但是，我想模拟最接近我的应用程序的东西。我不知道为什么这开始发生。我无法点击和编辑 Child First Name，并且 Child Last Name

我该如何解决这个问题？！

<div class="banner">
    <img class="banner-image responsive" style="width: 95%;  height: 300px;" src="images/TOKTW2019pic.png">
</div>


<!-- <h1 style="text-align: center;">Area for messages</h1> -->



<form method="GET" action="/form_submit">


    <div class="group">
        <div class="col-25">
            <label for="fname">First Name</label>
        </div>
        <div class="col-75">
            <input type="text" name="employee_First_name" id="employee_First_name" value='<%=user.firstName%>' placeholder='First Name' readonly>
        </div>
        <span class="highlight"></span>
        <span class="bar"></span>
    </div>

    <div class="group">
        <div class="col-25">
            <label for="fname">Last Name</label>
        </div>
        <div class="col-75">
            <input type="text" name="employee_last_name" id="employee_last_name" value='<%=user.lastName%>' placeholder='Last Name' readonly>
        </div>
        <span class="highlight"></span>
        <span class="bar"></span>
    </div>

    <div class="group">
        <div class="col-25">
            <label for="fname">*Child First Name</label>
        </div>
        <div class="col-75">
            <input type="text" name="Child_name" required>
        </div>
        <span class="highlight"></span>
        <span class="bar"></span>
    </div>

    <div class="group">
        <div class="col-25">
            <label>*Child Last Name</label>
        </div>
        <div class="col-75">
            <input type="text" name="Child_last_name" required>
        </div>
        <span class="highlight"></span>
        <span class="bar"></span>
    </div>

    <div class="group">
        <div class="col-25">
            <label>*Relationship With Child</label>
        </div>
        <!-- <div class="col-75"> -->
        <!-- <input type="text" name="relations" required> -->
        <div class="select-list">
             <select name="relations" id="selectBox" style="text-transform: none;" class="select" required onchange="otherFunc()">
                <option value="">Choose</option>
                <option value="Son">Son</option>
                <option value="Daughter">Daughter</option>
                <option value="Other Relative">Other Relative</option>
                <option value="Other">Other</option>
                </select>

                <span class="highlight"></span>
                <span class="bar"></span>
        </div>
    </div>

    <script>
        function otherFunc() {
            var selectBox = document.getElementById("selectBox");
            var selectedValue = selectBox.options[selectBox.selectedIndex].value;
            console.log(selectedValue)
            if (selectedValue == "Other") {
                document.getElementById("other").innerHTML = ' <div class="group"><div class="col-25"><label>Please clarify if "Other"</label></div><div class="col-75"><input type="text" name="otherInput" required></div><span class="highlight"></span><span class="bar"></span></div>'
            }
        }
    </script>

    <div id="other"></div>


    <div class="group">
        <div class="col-25">
            <label>*Contact Cell Number</label>
        </div>
        <div class="col-75">
            <input type="text" name="phone_number" required>
        </div>
        <span class="highlight"></span>
        <span class="bar"></span>

    </div>

    <div class="group">
        <div class="col-25">
            <label>Allergies</label>
        </div>
        <div class="col-75">
            <input type="text" name="Allergies" required>
        </div>
        <span class="highlight"></span>
        <span class="bar"></span>

    </div>



    <div class="form-select">
        <div class="label-flex">


        </div>
        <div class="col-25">
            <label>Dietary Restrictions</label>
        </div>
        <div class="select-list">

            <select name="Dietary_Restrictions" id="meal_preference" style="text-transform: none;" class="select" required>
                <option value="">Choose</option>
                <option value="None">None</option>
                <option value="Halal">Halal</option>
                <option value="Kosher">Kosher</option>
                <option value="Vegetarian">Vegetarian</option>
                <option value="Gluten-Free">Gluten-Free</option>
            </select>

        </div>

    </div>





</form>



<!-- label {
    padding: 12px 12px 12px 0;
    display: inline-block;
    color:#000; 
    font-size:20px;
    font-weight:900;
    display: inline-block;
    /* width: 140px; */
    text-align: right;
}

input[type=checkbox] {
    font-size: 18px;
    padding: 10px 10px 10px 5px;
    display: block;
    border: 1px solid black;
    border-bottom: 1px solid black;
    float:left;
    margin: 5px 10px 5px 0;
} -->

<style>
    * {
        box-sizing: border-box;
    }


    .select {
        font-size: 18px;
        padding: 10px 10px 10px 5px;
        display: block;
        width: 300px;
        border: 1px solid black;
        border-bottom: 1px solid black;

    }

    .col-25 {
        float: left;
        width: 25%;
        margin-top: 6px;
    }

    .col-75 {
        float: left;
        width: 75%;
        margin-top: 6px;
    }

    label {
        padding: 12px 12px 12px 0;
        display: inline-block;
        color: #000;
        font-size: 20px;
        font-weight: 900;
        display: inline-block;
        /* width: 140px; */
        text-align: right;
    }

    .inputt {
        font-size: 18px;
        padding: 10px 10px 10px 5px;
        display: inline-block;
        border: 1px solid black;
        border-bottom: 1px solid black;
        margin: 5px 10px 5px 0;
    }



    .row:after {
        content: "";
        display: table;
        clear: both;
    }

    /* basic stylings ------------------------------------------ */
    body {
        background: url(https://scotch.io/wp-content/uploads/2014/07/61.jpg);
    }

    .container {
        font-family: 'Roboto';
        width: 600px;
        display: block;
        background: #FFF;
        padding: 10px 50px 50px;
        margin-left: 80px;
    }

    .container2 {
        font-family: 'Roboto';
        display: block;
        background: #FFF;
        margin-left: 100px;
    }

    h2 {
        text-align: left;
        margin-left: 80px;
    }

    h2 small {
        font-weight: normal;
        color: #888;
        display: block;
    }

    .footer {
        text-align: center;
    }

    .footer a {
        color: #53B2C8;
    }

    /* form starting stylings ------------------------------- */
    .group {
        position: relative;
        margin-bottom: 45px;
    }

    input[type="text"] {
        font-size: 18px;
        padding: 10px 10px 10px 5px;
        display: block;
        width: 300px;
        border: 1px solid black;
        border-bottom: 1px solid black;
    }

    input:focus {
        outline: none;
    }

    /* LABEL ======================================= */
    /* label                 {
  color:#999; 
  font-size:18px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:10px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
} */

    /* active state */
    input:focus~label,
    input:valid~label {
        top: -20px;
        font-size: 14px;
        color: #5264AE;
    }

    /* BOTTOM BARS ================================= */
    .bar {
        position: relative;
        display: block;
        width: 300px;
    }

    .bar:before,
    .bar:after {
        content: '';
        height: 2px;
        width: 0;
        bottom: 1px;
        position: absolute;
        background: #5264AE;
        transition: 0.2s ease all;
        -moz-transition: 0.2s ease all;
        -webkit-transition: 0.2s ease all;
    }

    .bar:before {
        left: 50%;
    }

    .bar:after {
        right: 50%;
    }

    /* active state */
    input:focus~.bar:before,
    input:focus~.bar:after {
        width: 50%;
    }

    /* HIGHLIGHTER ================================== */
    .highlight {
        position: absolute;
        height: 60%;
        width: 100px;
        top: 25%;
        left: 0;
        pointer-events: none;
        opacity: 0.5;
    }

    /* active state */
    input:focus~.highlight {
        -webkit-animation: inputHighlighter 0.3s ease;
        -moz-animation: inputHighlighter 0.3s ease;
        animation: inputHighlighter 0.3s ease;
    }

    /* ANIMATIONS ================ */
    @-webkit-keyframes inputHighlighter {
        from {
            background: #5264AE;
        }

        to {
            width: 0;
            background: transparent;
        }
    }

    @-moz-keyframes inputHighlighter {
        from {
            background: #5264AE;
        }

        to {
            width: 0;
            background: transparent;
        }
    }

    @keyframes inputHighlighter {
        from {
            background: #5264AE;
        }

        to {
            width: 0;
            background: transparent;
        }
    }

    .responsive {
        width: 100%;
        height: auto;
    }

    * {
        box-sizing: box-content;
    }

    /*  */
    #page {
        max-width: 960px;
        margin: 0 auto;

    }

    .title {}

    .second-title {
        font-size: 1.2em;
    }

    .centered-text {
        /* text-align:center; */
    }

    nav ul {
        list-style-type: none;
    }

    nav ul li {
        display: inline;
        padding: 1rem;
        text-align: center;
    }

    .centered-text {}

    a:link {
        color: HSL(215, 56%, 67%);
        text-decoration: none;
    }

    a:hover {
        color: HSL(3, 61%, 67%);
    }

    .img-align-center {
        display: block;
        margin: 0 auto;
    }

    .body-text {
        font-size: 20px
    }

    .submit {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 300px;
        background-color: #fff;
        border: 2px solid black;
        color: black;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
    }
</style>

Answer 1

您不能编辑具有 readonly 属性的输入。 尝试删除输入字段中的 readonly readonly>

Answer 2

我不确定您想要什么样的布局，但是如果您将 overflow: auto; 添加到 .group，您可以访问所有输入字段。 （ overflow: auto; 导致父元素包装其所有浮动子元素）。没错，其中没有一个与第一个输入字段重叠，使其无法访问。