Bootstrap中输入字段的边框

时间：2018-02-15 06:21:22

标签： jquery twitter-bootstrap css3

我需要输入元素的边框，如下图所示：

enter image description here

但是我使用以下代码获得了不同的结果。有人可以帮我解决这个问题吗？

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
 .input-number{
			width: 25px !important;
			margin: 0 5px;
			font-size: 25px;
			border-bottom:2px solid #000;
			text-align: center;
			vertical-align: bottom;
		}
  </style>
</head>
<body>
<div style="width:150px;padding:50px;">
  <input type="text" class="input-number" value="0"/>
</div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：2)

您可以按如下方式创建自定义边框：

HTML：

<input type="text" class="input-number" value="0"/>
<div class="borderbox"></div>

CSS：

.input-number {
    width: 25px !important;
    margin: 0 5px;
    font-size: 25px;
    border: none;
    text-align: center;
    vertical-align: bottom;
}
.input-number:focus {
  border:none;
  outline:none;
}
.borderbox {
  border: 2px solid #000;
  border-top: none;
  width: 30px;
  height:10px;
  margin-top: -8px;
  margin-left: 3px;
}

Codepen链接供参考： https://codepen.io/YasirKamdar/pen/vdeRWw

相关问题
最新问题