Remove Styling from Input Field

Question

I created an animation for a button, which works well if the button is a div container. However if I apply the same CSS to an input field the animation breaks. Could someone explain why this is the case and how to resolve it?

This is how my CSS looks like:

.submit__button {  
  font-family: BentonSans;
  font-weight: 500;
  font-size: 0.9rem;
  padding: 0.78125rem;
  line-height: 60px;
  display: flex;
  border: 2px solid #303333;
  margin: 2rem auto 0;
  transition: 0.5s;
  -webkit-transition:0.5s;
  position: relative;
  vertical-align: middle;
  color: #303333;
  display: inline-block;
  text-align: center;
  transition: 0.5s;
  padding: 0 20px;
  cursor: pointer;
  -webkit-transition:0.5s;
}

.submit__button:hover {
  border: 2px solid rgba(0,0,0,0);
  color: #303333;
}

.submit__button::before, .submit__button::after {
  width: 100%;
  height:100%;
  z-index: 3;
  content:'';
  position: absolute;
  top:0;
  left:0;
  box-sizing: border-box;
  -webkit-transform: scale(0);
  transition: 0.5s;
}


.submit__button::before {
  border-bottom: 2px solid #000;
  border-left: 0;
  -webkit-transform-origin: 0% 100%;
}

.submit__button::after {
  border-top: 0;
  border-right: 0;
  -webkit-transform-origin: 50% 50%;
}

.submit__button:hover::after, .submit__button:hover::before {
  -webkit-transform: scale(1);
}

http://codepen.io/hejsfj/pen/RpramK

how can a hover effect work on an input field? – AzizurRahamanCA Mar 01 '17 at 14:46 — AzizurRahamanCA, Mar 01 '17 at 14:46

nashcheez · Accepted Answer · 2017-03-01T16:22:55.353

1

Your animation is achieved using pseudo element ::before in a div. Hence, its working pretty good.

However, pseudo elements are not supported or unreliable in elements that are self enclosed like input, img, br etc. The pseudo elements applied to these self enclosing tags won't be visible in the DOM.

According to MDN,

A replaced element is any element whose appearance and dimensions are defined by an external resource. Examples include images (<img> tags), plugins (<object> tags), and form elements (<button>, <textarea>, <input>, and <select> tags). All other elements types can be referred to as non-replaced elements.

::before and ::after only work with non-replaced elements.

Also, as user @AndreiGheorghiu mentions:

From what could be made of the "Living Standard" on the subject, it looks like ::before and ::after usage is restricted to elements that can contain other nodes of type (HTML) Element. Which is why <textarea>, although a paired tag, cannot have ::before and ::after. It can only contain text nodes.

NOTE

Sometimes however, one can make the pseudo elements works with the img tag (a few browsers do support it).

img {
  display: block; 
  content: ""; 
  height: 50px /* height of image in px */
}

Add: style="background-image: url(image.jpg)" to your img element in html.

edited Mar 01 '17 at 16:22

answered Mar 01 '17 at 14:47

nashcheez

5,067
1
27
53

I believe your answer is misleading, regarding this phrasing: *"Therefore, using ::before or ::after with replaced elements will produce **unreliable results."***. According to current `HTML` standards, single tags ***will not render*** any contained elements., because they cannot contain any elements. Therefore, the produced results are extremely reliable. – tao Mar 01 '17 at 15:22
@AndreiGheorghiu I reframed my answer in case of confusions. And there are occasions where you can make the single tags behave as if they support pseudo elements. – nashcheez Mar 01 '17 at 15:31
Could you please provide an example of such a case? Thank you. – tao Mar 01 '17 at 15:41
Check the *NOTE* section in the answer & try it out. Some previous versions of Firefox did support it as far as I can remember. – nashcheez Mar 01 '17 at 15:47
From what I could make of the ["Living Standard"](https://html.spec.whatwg.org/multipage/dom.html) on the subject, it looks like `::before` and `::after` usage is restricted to elements that can contain other nodes of type (HTML) `Element`. Which is why ``, although a paired tag, cannot have `::before` and `::after`: it can only contain text nodes. I think this is the correct answer to the question. I'll delete mine and, when/if you have the time, please consider including this in your answer. Thanks. – tao Mar 01 '17 at 16:09
Sure, I have updated my answer with your reference. Thanks. :) – nashcheez Mar 01 '17 at 16:23

score 0 · Answer 2 · edited May 23 '17 at 10:29

0

Your animations relies on the :before element. This doesn't work on inputs because they need a container to be displayed in and in the input field you can not use other elements.

Possible duplication of this question: Can I use the :after pseudo-element on an input field?

edited May 23 '17 at 10:29

Community

1
1

answered Mar 01 '17 at 14:49

Stefan F.

608
7
15

Remove Styling from Input Field

2 Answers2