how to change input text box style to line?

前端 未结 6 1495
醉酒成梦
醉酒成梦 2021-02-03 10:48

in my form I have three input fields name, email, mobile but I want to change input text box like -

name :  _____________  
email:  _____________  
mob  :  ___         


        
相关标签:
6条回答
  • 2021-02-03 11:17

    In your CSS:

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

    From here you can play with padding to position the actual text entry where you would like it. For instance, to have the line extend 5 pixels either side of the actual entry area:

        padding: 2px 5px;
    
    0 讨论(0)
  • 2021-02-03 11:22

    if you want to this also in ie6 than you can use bg image for this with background-position

    .

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

    so for all browser support with ie6 you should use this.

    0 讨论(0)
  • 2021-02-03 11:24
    border: 1px solid black;
    float: left;
    margin: 0;
    padding: 0;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    
    0 讨论(0)
  • 2021-02-03 11:29

    If using styled components you can do the following if using a white background, which I think there are some equivalent CSS to do same thing:

    const TextInput = styled.TextInput`
      width: 295px;
      height: 30px;
      border: 1px solid #dbdfea;
    
      border-top-color: white;
      border-left-color: white;
      border-right-color: white
     ` 
    

    0 讨论(0)
  • 2021-02-03 11:31

    you want to show only bottom part that's why apply css in such a way that it disables all the other three parts ..

    apply CSS like

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

    works for all

    0 讨论(0)
  • 2021-02-03 11:32

    You can style an input box however you want. Check the Codepen where I have styled an input box only with css.

    Style an INPUT box with only CSS

    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>

    0 讨论(0)
提交回复
热议问题