CODEWITHSUNDEEP
htmlcss
Pham Minh Tan
Pham Minh Tan

Reputation: 2096

Custom style for input with CSS

I have a design for input like this:

Design

But with my style, I can't do that.

My CSS:

input.custom[type=text]{
    border: none;
    border-bottom: 1px solid #00CCCB;
}

.custom::-webkit-input-placeholder {
    color: #727272;
}

.custom:-moz-placeholder { /* Firefox 18- */
    color: #727272;  
}

.custom::-moz-placeholder {  /* Firefox 19+ */
    color: #727272;  
}

.custom:-ms-input-placeholder {  
    color: #727272;  
}

My HTML:

<input type="text" class="custom" placeholder="Text goes here"/>

Results:

Result

How can I style an input with bottom border and tiny left, right borders, like in my design?

Upvotes: 2

Views: 361

Answers (4)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123387

Without adding new markup you can play with both border-bottom and linear-gradients, e.g.

input {

   font           : 50px Arial;
   padding        : 5px 10px;
   border         : 8px transparent solid;
   border-bottom  : 8px #bada5a solid;
   background     : 

      /* 2) this partially overlaps the previous gradient by
       * applying a white background in the middle of the element
       * and leaving at both of the sides the background 1)
       * for the defined tickness 
       */
      linear-gradient(to right, transparent 8px, #fff 8px, 
             #fff calc(100% - 8px), transparent calc(100% - 7px)), 

      /* 1) this defines the offset from top for both the 
       * left and right border 
       */
      linear-gradient(to bottom, #fff 60%, #bada5a 60%);

   background-origin: border-box;
}

Example on Codepen (tested on Firefox and Chrome)

This goes beyond your question but in that snippet I created — for the sake of code reusability — a SASS mixin that accepts as arguments the border-color, the tickness (in px) and the offset (in %) from top for the left and right border.

If you don't use a CSS preprocessor, just set your arguments in the codepen example and then switch to the compiled view, so you can grab the CSS code

Result

enter image description here

Upvotes: 1

SW4
SW4

Reputation: 71150

You can wrap the input in a span and style the :before and :after on that accordingly. You will need to use a span as inputs are replaced elements, without psuedo elements you can style.

input {
  border: none;
  border-bottom: 1px solid #00CCCB;
  padding: 0 10px;
  color: #727272;
  font-size: 20px;
  vertical-align: baseline;
}
input:focus {
  outline: none;
}
span {
  position: relative;
  display: inline-block;
}
span:before,
span:after {
  content: '';
  display: block;
  bottom: 0;
  height: 15px;
  border-left: 1px solid #00CCCB;
  position: absolute;
}
span:after {
  right: 0;
}
<span><input /></span>

Upvotes: 8

SVK
SVK

Reputation: 2197

Updated Link

http://jsfiddle.net/4dvkbtpg/10/

css code:

input {
  border: none;
  border-radius:2px;
  border-bottom: 1px solid #00CCCB;
  padding: 0 12px;
}
input:focus {
  outline: none;
}
span {
  position: relative;
}
span:before,
span:after {
  content: '';
  bottom: -1px;
  height: 5px;
  border-left: 1px solid #00CCCB;
  position: absolute;
}

Upvotes: 1

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

Now you can try to this 

.inputsec{
  position: relative;
  display: inline-block;
  vertical-align: top;
  border-bottom: solid 2px #00CCCB;
}
.inputsec:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  top: 50%;
  border-left: solid 2px #00CCCB;
}
.inputsec:before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  top: 50%;
  border-right: solid 2px #00CCCB;
}


.inputsec > input {
  display: block;
  margin: 1px 8px 4px 8px;
  border: none;
  background-color: #fff;
  outline:none;
}
<div class="inputsec">
<input type="text" placeholder="Enter your text" />
</div>

Upvotes: 0

Related Questions