Шрифт удивительный значок размещен верхний правый угол ввода в таблице

Question

Я хотел бы значок, расположенный в верхнем правом углу моего ввода. Вход находится внутри столбца таблицы (https://jsfiddle.net/3zLzfz04/)
Каков наилучший способ сделать это?

Пример кода с вводом в стиле: HTML:

.inpHours{ 
 
    font-weight: 500; 
 
    text-align: right; 
 
    font-size: 14px; 
 
    border-style: solid; 
 
    border-width: thin; 
 
    height: 47px; 
 
    width: 47px; 
 
    -webkit-border-radius: 7px; 
 
    -moz-border-radius: 7px; 
 
    border-radius: 7px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/> 
 
<table id="sample-table"> 
 
<tbody> 
 
    <tr> 
 
    <td class="hours_entered"> 
 
     <input class="inpHours" type="number"/> 
 
     <i class="fa fa-check-circle-o status-icon"></i> 
 
    </td>  
 
    </tr> 
 
</tbody> 
 
</table>

Answer 1

tr td.hours_entered{ 
 
    position: relative; 
 
} 
 

 
.inpHours{ 
 
    font-weight: 500; 
 
    text-align: right; 
 
    font-size: 14px; 
 
    border-style: solid; 
 
    border-width: thin; 
 
    height: 47px; 
 
    width: 47px; 
 
    -webkit-border-radius: 7px; 
 
    -moz-border-radius: 7px; 
 
    border-radius: 7px; 
 
} 
 

 
tr td.hours_entered .status-icon{ 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/> 
 
<table id="sample-table"> 
 
<tbody> 
 
    <tr> 
 
    <td class="hours_entered"> 
 
     <input class="inpHours" type="number"/> 
 
     <i class="fa fa-check-circle-o status-icon"></i> 
 
    </td>  
 
    </tr> 
 
</tbody> 
 
</table>

Answer 2

Зависит от остальной части макета вашего стола, но как о вводе позиции: по сравнению с тд и абсолютное на шрифте удивительный значок?

https://jsfiddle.net/3zLzfz04/1/

.hours_entered { 
    position: relative; 
} 

.within { 
    position: absolute; 
    right: 5px; 
    top: 5px; 
} 

И:

<table id="sample-table"> 
<tbody> 
    <tr> 
    <td class="hours_entered"> 
     <input class="inpHours" type="number"/> 
     <i class="fa fa-check-circle-o status-icon within"></i> 
    </td>  
    </tr> 
</tbody> 
</table> 

Answer 3

Просто добавьте в код CSS:

.hours_entered > i { 
    position: absolute; 
    top: 12px; 
    left: 44px; 
} 

Заканчивать этот fiddle.