6

I have an <input> element, and I can't modify the HTML around it, but I want to add a glyphicon (<i class="glyphicons glyphicons-some-icon"/>) inside of it. I was hoping to do it with CSS, but I can't seem to get :after to work. I thought something like the following would generate that element:

#my-input {
    content: attr(class, 'glyphicons glyphicon-some-icon'); 
    content: '<i/>'; 
}

but it doesn't. Could anyone who understands :after better explain how I can generate the desired <i class="glyphicons glyphicons-some-icon"/> using :after?

machineghost
  • 33,529
  • 30
  • 159
  • 234
  • 5
    You can't. `:before` and `:after` pseudo-elements are inserted inside the element. `` elements cannot have children, and therefore cannot have pseduo-element children, unfortunately. – misterManSam Oct 19 '15 at 05:36
  • 1
    You can find these by looking at Bootstrap's stylesheet: http://stackoverflow.com/questions/19740700/glyphicons-bootstrap-icon-font-hex-value – om_jaipur Oct 19 '15 at 05:38
  • This isnt possible with pure CSS http://stackoverflow.com/questions/2587669/can-i-use-the-after-pseudo-element-on-an-input-field – NooBskie Oct 19 '15 at 05:42

2 Answers2

12

:before and :after are applied inside a container, which means you can use it for elements with an end tag.see explanation

See below example. to achieve what you want.

NOTE: parent position is relative so that chilled absolute position will take top and bottom depending on parent.

.myInput:after {
  font-family: FontAwesome;
  content: "\f0a9";
  position: absolute;
  top: 3px;
  left: 7px;
}
.my{
position:relative
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet" />

<div class="my">

  <div class="myInput">
    <input type="text" />
  </div>

</div>

OR

.mystyle:before {
  font-family: FontAwesome;
  content: "\f0a9";
}
.myInput {
  position: relative;
}
.myInput div {
  position: absolute;
  top: 3px;
  left: 5px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myInput">
  <input class="mystyle" type="text" value="" />
  <div class="mystyle"></div>
</div>
Keval Bhatt
  • 6,224
  • 2
  • 24
  • 40
1

This could achieve what you are trying to do.

[data-icon]:before {
  font-family: icons;
  content: attr(data-icon);
  speak: none; /* Not to be trusted, but hey. */
  position: absolute;
}
<h2 id="stats" aria-hidden="true" data-icon="&#x21dd;">
<input type="text"/>
</h2>

OR

.glyphicon-search:before {
    position: absolute;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="glyphicon glyphicon-search">
<input type="text"/>
</div>
Hil
  • 329
  • 4
  • 10