如何将输入文本框的样式更改为下划线？

Question

在我的表单中，我有三个输入字段：姓名、电子邮件和手机号码，但是我想要更改输入文本框的样式 -

在我的表格里，我有三个输入框分别对应姓名、邮箱和手机号。但是我希望将它们的文本框样式修改为 -

name :  _____________  
email:  _____________  
mob  :  _____________  

- nectar

Answer 1

在你的CSS中：

input[type=text] {
    background: transparent;
    border: none;
    border-bottom: 1px solid #000000;
}

从这里开始，您可以使用填充来定位实际的文本输入位置。例如，要使线条在实际输入区域两侧延伸5像素：

    padding: 2px 5px;

- Matthew Scharley

---

你应该使用类而不是属性选择器来适应旧浏览器。 - Joey

这将在IE7+、FF2+、Chrome等浏览器中运行。但如果需要支持IE6，则强烈建议使用类或其他方法。 - Matthew Scharley

您可能还希望添加“outline: none”，这样当字段获得焦点时就不会出现轮廓线。 - Beau

在这种情况下，您可能希望这样做，但请不要只是这样做。对于许多使用您的网站的人来说，焦点样式非常重要，它使使用变得更加轻松。 - Matthew Scharley

Answer 2

如果你想在IE6中实现这个效果，你可以使用背景图片和background-position。

input{
    background:url(bg-dot.jpg) repeat-x center bottom;
    border:none;
    padding:2px 2px;
}

为了支持所有浏览器，包括IE6，您应该使用以下代码。

- Kali Charan Rajput

---

我觉得你指的是 background-position。另外，IE6已经过时了，请让它保持这种状态，为了世界上所有美好的事物，请这么做。 - Matthew Scharley

@Matthew Scharley. 是的，这是背景位置。关于ie6，你可以在http://www.w3schools.com/browsers/browsers_stats.asp找到，你会发现ie6用户比safari和opera还要多。如果我们在意他们，那么我们也应该关心ie6。 - Kali Charan Rajput

@kc：但Safari和Opera的用户群要么增长，要么保持不变。IE6的使用率正在积极下降。包括Google在内的许多ISV都放弃了IE6。如果你不承认它已经死亡，那么它也确实快要死了，是时候放手了。 - Matthew Scharley

@kc：记录一下，我没有给你点踩，只是分享我的意见。此外，我有90%的把握，我的解决方案适用于IE6，唯一的问题是选择器。不过可能我错了。 - Matthew Scharley

八年后终于到了这里，感觉像是穿越了时空。 - Alejandro Bastidas

Answer 3

如果使用styled components，并且使用白色背景，您可以执行以下操作，我认为有一些等效的CSS可以做相同的事情：

const TextInput = styled.TextInput`
  width: 295px;
  height: 30px;
  border: 1px solid #dbdfea;

  border-top-color: white;
  border-left-color: white;
  border-right-color: white
 ` 

- Nouru Muneza

Answer 4

您可以随心所欲地样式化输入框。请查看 Codepen，我已经使用 CSS 样式化了一个输入框。

仅使用 CSS 样式化 INPUT 输入框

HTML -

<div class="input__box">
    <input type="text" placeholder="Enter Some Text Here...">
</div>

CSS -

.input__box{
    width:800px;
    height: 200px;
    margin:0 auto;
    background-color: #f2f2f2;
    display: grid;
    place-items:center;
    position: relative;
}

.input__box  input{
    all:unset;
    width:600px;
    height:60px;
    border:1px solid grey;
    padding-left:55px;
    font-size:18px;
    color:#333;
    font-family:sans-serif;
    position:relative;
}

input:focus{
    outline:1px solid royalblue;
    border:none;
}

input[type="text"]::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    font-size:18px;
    color:dimgrey;
    font-family:sans-serif;
}

input[type="text"]::-moz-placeholder{ /* Firefox 19+ */
    font-size:18px;
    color:dimgrey;
    font-family:sans-serif;
}

input[type="text"]:-moz-placeholder{ /* Firefox 18- */
    font-size:18px;
    color:dimgrey;
    font-family:sans-serif;
}

input[type="text"]:-ms-input-placeholder{ /* IE 10+ */
    font-size:18px;
    color:dimgrey;
    font-family:sans-serif;
}

input[type="text"]::placeholder { 
    font-size:18px;
    color:dimgrey;
    font-family:sans-serif;
}

.input__box::before{
    content: "☎";
    position: absolute;
    left: calc(50% - 327px);
    top:calc(50% - 30px);
    color: #333;
    font-weight: bold;
    font-size:40px;
    padding:0 10px;
}

.input__box {
  width: 800px;
  height: 200px;
  margin: 0 auto;
  background-color: #f2f2f2;
  display: grid;
  place-items: center;
  position: relative;
}

.input__box input {
  all: unset;
  width: 600px;
  height: 60px;
  border: 1px solid grey;
  padding-left: 55px;
  font-size: 18px;
  color: #333;
  font-family: sans-serif;
  position: relative;
}

input:focus {
  outline: 1px solid royalblue;
  border: none;
}

input[type="text"]::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  font-size: 18px;
  color: dimgrey;
  font-family: sans-serif;
}

input[type="text"]::-moz-placeholder {
  /* Firefox 19+ */
  font-size: 18px;
  color: dimgrey;
  font-family: sans-serif;
}

input[type="text"]:-moz-placeholder {
  /* Firefox 18- */
  font-size: 18px;
  color: dimgrey;
  font-family: sans-serif;
}

input[type="text"]:-ms-input-placeholder {
  /* IE 10+ */
  font-size: 18px;
  color: dimgrey;
  font-family: sans-serif;
}

input[type="text"]::placeholder {
  font-size: 18px;
  color: dimgrey;
  font-family: sans-serif;
}

.input__box::before {
  content: "☎";
  position: absolute;
  left: calc(50% - 327px);
  top: calc(50% - 30px);
  color: #333;
  font-weight: bold;
  font-size: 40px;
  padding: 0 10px;
}

<div class="input__box">
  <input type="text" placeholder="Enter Some Text Here...">
</div>

- Bappi Das

Answer 5

border: 1px solid black;
float: left;
margin: 0;
padding: 0;
border-top: 0px;
border-left: 0px;
border-right: 0px;

- user7685888

Answer 6

你想只显示底部，因此应用CSS以禁用其他三个部分...

应用类似以下的CSS：

border: 1px solid black;
float: left;
margin: 0;
padding: 0;
border-top: 0px;
border-left: 0px;
border-right: 0px;

适用于所有

- Vishal Sharma

Answer 7

这是我的 CSS。

   .mainInput {
     width: 100%;
     border: none;
     border-bottom: 1px solid #474747;
     color: rgba(0, 0, 0, 0.4);
     background: transparent;
     font-size: 16px;
     padding-bottom: 1.25rem;
     outline: none;
   }
   .mainInput::placeholder {
     text-overflow: ellipsis !important;
     color: rgba(0, 0, 0, 0.4);
   }

这里是链接

- Mostafa Matar