how to change input text box style to line?
in my 开发者_运维知识库form I have three input fields name, email, mobile but I want to change input text box like -
name : _____________
email: _____________
mob : _____________
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;
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.
border: 1px solid black;
float: left;
margin: 0;
padding: 0;
border-top: 0px;
border-left: 0px;
border-right: 0px;
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>
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
`
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
here is my 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);
}
here it is
精彩评论