Currently, the output of my code looks like this:
https://i.stack.imgur.com/pl5CJ.jpg
The first box (squared) represents an <input>, while the second box (rectangled) is a <select>. There are several issues that I am facing:
- The text entered in the
<input>box does not appear, and similarly, the selected option does not display in the<select>box. - The green button should be centered, and despite using the CSS properties
text-align: centerandalign-content: center, it remains off-center. - Upon hovering over the button, it should increase in size by 1.1 times using the CSS line
transition: scale(1.1), but this effect is not taking place.
<template>
<div id="food-info">
<div class="division center">
<h3 class="division">Banana</h3>
<h4 class="division">Serving size</h4>
<input class="division quant-input" />
<select class="division quant-sizes">
<option>100g</option>
<option>large</option>
</select>
</div>
<div>
<button class="add-entry center">Add to Diary</button>
</div>
</div>
</template>
<style scoped>
.center {
text-align: center;
align-content: center;
}
.division {
display: inline-block;
padding: 1rem 1rem;
}
.quant-input {
height: 10px;
width: 10px;
}
.quant-sizes {
height: 10px;
width: 80px;
top: 40px;
}
.add-entry {
width: 300px;
background-color: #4caf50;
color: white;
border-radius: 10px;
}
.add-entry:hover {
transition: scale(1.1);
}
</style>