在输入字段中并排带有标签的 div

Question

I'm trying to modify the css to insert label in input field. I want them to be one, is it possible ? Also I should keep the side by side aspect for the divs. I tried the flex method to keep the divs side by side, but the label and input field are two separate elements rather than a single element. As you can see from the example code, the label is red while the input field does not undergo the same change.

 calculate = function() { var carb = document.getElementById('carb').value; var pro = document.getElementById('pro').value; var fat = document.getElementById('fat').value; //Kcal Totali var kcaltot = (4 * carb) + (4 * pro) + (9 * fat); document.getElementById('kcaltot').value = kcaltot.toLocaleString('it-IT', { maximumFractionDigits: 0 }) + " Kcal/day"; //Kcal Macro var kcal_carb = (carb * 4); document.getElementById('kcal_carb').value = kcal_carb.toLocaleString('it-IT', { maximumFractionDigits: 0 }) + " Kcal"; var kcal_pro = (pro * 4); document.getElementById('kcal_pro').value = kcal_pro.toLocaleString('it-IT', { maximumFractionDigits: 0 }) + " Kcal"; var kcal_fat = (fat * 9); document.getElementById('kcal_fat').value = kcal_fat.toLocaleString('it-IT', { maximumFractionDigits: 0 }) + " Kcal"; //Kcal Percentage var p_carb = (carb * 4) / (kcaltot) * 100; document.getElementById('p_carb').value = p_carb.toLocaleString('it-IT', { maximumFractionDigits: 0 }) + " %"; var p_pro = (pro * 4) / (kcaltot) * 100; document.getElementById('p_pro').value = p_pro.toLocaleString('it-IT', { maximumFractionDigits: 0 }) + " %"; var p_fat = (fat * 9) / (kcaltot) * 100; document.getElementById('p_fat').value = p_fat.toLocaleString('it-IT', { maximumFractionDigits: 0 }) + " %"; }

 .container_macros { display: flex; background: red; } .container_macros>div { flex: 1; outline: none; } .m_field { display: inline-block; width: 100%; background: #fff; outline: none !important; } .container_macros.grams input { border: none; text-align: } .container_macros.grams label { padding: 0px 0px 0px 10px; line-height: 48px; font-size: 15px; font-family: roboto; font-weight: 500; color: #5F6A7C; } .kcal_res { display: block; width: 100%; } .kcal_total label { font-size: 16px; font-family: titillium web; font-weight: bold; color: #5F6A7C; } .kcal_total input { padding-left: 10px; height: 40px; font-family: titillium web; background: #f9fafd; border: 1px solid #eaeaea; } .kcal_total input:focus { border: 1px solid #eaeaea; background: #f9fafd; }

 <!---Grams_input---> <div class="container_macros grams"> <label>prprpr</label> <input oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type="number" class="m_field" maxlength="3" id="carb" name "pro" placeholder="150g" form="macro" onchange="calculate()" required/> <label>prprpr</label> <input oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type="number" class="m_field" maxlength="3" id="pro" name "pro" placeholder="150g" form="macro" onchange="calculate()" required/> <label>prprpr</label> <input oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type="number" class="m_field" maxlength="3" id="fat" name "pro" placeholder="150g" form="macro" onchange="calculate()" required/> </div>

https://jsfiddle.net/snake93/zcdq2vx9/94/

Answer 1

Not sure if this is what you're asking, but if you want the labels and inputs to both turn red, you can either wrap your inputs with the <label> tags.

Or alternatively wrap both the <label> and <input /> tags with divs, and apply your styling to the parent <div> .

eg

<label>prprpr
    <input oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type="number" class="m_field" maxlength="3" id="carb" name"pro" placeholder="150g" form="macro" onchange="calculate()" required />
</label>

Fiddle here: https://jsfiddle.net/v3gp20y5/