Question

我想创建一个包含整数值的输入。如果单击caret-up按钮，则输入值将增加1；如果单击cater-down按钮，则输入值将减少1。

我的问题是down-caret的样式错误。我想将down-caret放在蓝色矩形的顶部。

当前，down-caret位于div的底部。下面是当前输出的图像。

我尝试了一些操作，例如弯曲，绝对位置等。但这是红色div和蓝色div的重叠区域。

// add a javascript function to change the value of the input when clicking the caret
// get the input element
var input = document.getElementById("remind_number");
// function to modify the value of the input
function addValue(value) {
  input.value = parseInt(input.value) + parseInt(value);
}

/* style the qty div to display both input and buttons div in the same line*/
.qty {
  width: 250px;
  height: 50px;
}

/* add the wrapper div to easy styling the element*/
#remind_number_wrapper {
  width: 230px;
  float: left;
  height: 100%;
}

/* adjust the height of the input to fit out the div parent, it easier to see*/
#remind_number_wrapper input {
 width: 220px;
 height: 100%;
}

/* style the buttons div to display input and caret in the same line*/
#buttons {
  width: 20px;
  height: 100%;
  float: right;
  display: block;
}

/* style the action button to fit the height of the div*/
.action_btn {
  height: 25px;
}

#plus_remind {
    font: 33px/1 Arial,sans-serif;
    border: 1px solid red;
    cursor: pointer;
}

#minus_remind {   
    font: 33px/1 Arial,sans-serif;
    border: 1px solid blue;
    cursor: pointer;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="qty">
   <div id="remind_number_wrapper">
     <input placeholder="Remind Number" name="remind_number" class="form-control" type="text" id="remind_number" value="0">
   </div>
   <div id="buttons">
     <!-- add className 'action_btn' to easier to style button in the same place-->
     <div class="action_btn" id="plus_remind" onclick="addValue(1)">
        <!-- change the fas to fa for the right class of font-awesome -->
        <i class="fa fa-caret-up"></i>
     </div>
     <div class="action_btn" id="minus_remind" onclick="addValue(-1)">
        <i class="fa fa-caret-down"></i>
     </div>
   </div>
</div>

Answer 1

对于数字，还有另一种使用input类型的number的解决方案

<input type="number" placeholder="Remind Number" name="remind_number" class="form-control" type="text" id="remind_number">

另一种方法，我删除了font-awesome的用法，并通过纯CSS创建三角形

// add a javascript function to change the value of the input when clicking the caret
// get the input element
var input = document.getElementById("remind_number");
// function to modify the value of the input
function addValue(value) {
  input.value = parseInt(input.value) + parseInt(value);
}

.qty {
  width: 200px;
}

#remind_number_wrapper {
  float: left;
}

i {
  display: inline-block;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  cursor: pointer;
}

.up {
  border-bottom: 5px solid black;
  margin-bottom: 0px;
}

.down {
  border-top: 5px solid black;
  margin-top: 0px;
}

<div class="qty">
   <div id="remind_number_wrapper">
     <input placeholder="Remind Number" name="remind_number" class="form-control" type="text" id="remind_number" value="0">
   </div>
   <div id="buttons">
     <!-- add className 'action_btn' to easier to style button in the same place-->
     <div class="action_btn" id="plus_remind" onclick="addValue(1)">
        <i class="up"></i>
     </div>
     <div class="action_btn" id="minus_remind" onclick="addValue(-1)">
        <i class="down"></i>
     </div>
   </div>
</div>

Answer 2

您的描述还不清楚，如果我对您的理解正确，请查看下面的示例以查看它是否是您想要的。

* {
    box-sizing: border-box;
}
.qty {
    position: relative;
}
.new {
    position: absolute;
    right: 0;
    top: 0;
}
#plus_remind, #minus_remind {
    margin: 0;
    height: 24px;
    width: 22px;
    font: 33px/1 Arial,sans-serif;
    cursor: pointer;
}
#plus_remind {
    border: 1px solid blue;
}
#minus_remind {   
    border: 1px solid red;
}
input {
    height: 48px;
    font-size: 1.5rem;
    margin: 0px;
    padding: 0px;
    line-height: 1.5rem;
    width: 100%;
}

<div class="qty">
   <input placeholder="Remind Number" name="remind_number" class="form-control" type="text" id="remind_number" value="25">
   <div class="new">
     <div onclick="document.getElementById('remind_number').value-=-1;" class="" id="plus_remind">
        <i class="fas fa-caret-up"></i>
     </div>
     <div onclick="document.getElementById('remind_number').value-=1;" class="" id="minus_remind">
        <i class="fas fa-caret-down"></i>
     </div>
  </div>

将Div的内容放在顶部

2 个答案: