Custom style for input with CSS

Question

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?

SW4 · Accepted Answer · 2015-06-26 10:49:08Z

8

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>

edited Jun 26, 2015 at 10:49

answered Jun 26, 2015 at 10:34

SW4

71.5k20 gold badges137 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

GreyRoofPigeon Over a year ago

You beat me to it, imo the only solution (and a nice one! +1)

rob_was_taken Over a year ago

The -3px on the bottom of the pseudo elements is causing an issue for me in Chrome. -1px keeps them in line. Not downvoting, it will just need a tweak for cross browsers that's all - still a good solution :)

Leo the lion Over a year ago

@SW4, sorry but i think bottom: -3px; should be -1px so the look will be more good..

SW4 Over a year ago

@Leothelion - actually, -3px is not incorrect in certain browsers, the value should actually be zero, with the correct BFC set on both the pseudos and span- see updated

Leo the lion Over a year ago

@SW4, i did no say that -3px is incorrect but i just found border beyond the bottom border(tested in chrome and ff) then i thought to tell you..just wanted to share..nothing else..

|

SVK · Accepted Answer · 2015-06-26 10:39:24Z

1

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;
}

answered Jun 26, 2015 at 10:39

SVK

2,2272 gold badges22 silver badges41 bronze badges

Comments

Fabrizio Calderan · Accepted Answer · 2018-02-07 11:19:59Z

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

Rohit Azad Malik · Accepted Answer · 2015-06-26 10:37:09Z

0

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>

answered Jun 26, 2015 at 10:37

Rohit Azad Malik

32.3k17 gold badges72 silver badges100 bronze badges

Collectives™ on Stack Overflow

Custom style for input with CSS

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related