Respostas:
Considere simular um campo de entrada com um prefixo ou sufixo fixo usando um intervalo com uma borda ao redor de um campo de entrada sem borda. Aqui está um exemplo básico de lançamento:
.currencyinput {
border: 1px inset #ccc;
}
.currencyinput input {
border: 0;
}
<span class="currencyinput">$<input type="text" name="currency"></span>
Use um .input-icon
div pai . Adicione opcionalmente .input-icon-right
.
<div class="input-icon">
<input type="text">
<i>$</i>
</div>
<div class="input-icon input-icon-right">
<input type="text">
<i>€</i>
</div>
Alinhe o ícone verticalmente com transform
e top
e defina pointer-events
como none
para que os cliques foquem na entrada. Ajuste o padding
e width
conforme apropriado:
.input-icon {
position: relative;
}
.input-icon > i {
position: absolute;
display: block;
transform: translate(0, -50%);
top: 50%;
pointer-events: none;
width: 25px;
text-align: center;
font-style: normal;
}
.input-icon > input {
padding-left: 25px;
padding-right: 0;
}
.input-icon-right > i {
right: 0;
}
.input-icon-right > input {
padding-left: 0;
padding-right: 25px;
text-align: right;
}
Ao contrário da resposta aceita, isso manterá o destaque de validação de entrada, como uma borda vermelha quando houver um erro.
float:left
ao input-symbol
div
input-symbol
contêiner
float
é ruim, então estou usando display:inline-block
combinado com vertical-align:bottom
agora :) Não consigo fazer um violino rapidamente, há muitos outros CSS acontecendo no meu exemplo atual ;-)
Você pode envolver seu campo de entrada em um intervalo, que você position:relative;
. Então você adiciona com
:before
content:"€"
seu símbolo de moeda e o faz position:absolute
. JSFiddle de trabalho
HTML
<span class="input-symbol-euro">
<input type="text" />
</span>
CSS
.input-symbol-euro {
position: relative;
}
.input-symbol-euro input {
padding-left:18px;
}
.input-symbol-euro:before {
position: absolute;
top: 0;
content:"€";
left: 5px;
}
Atualizar Se você deseja colocar o símbolo do euro à esquerda ou à direita da caixa de texto. JSFiddle de trabalho
HTML
<span class="input-euro left">
<input type="text" />
</span>
<span class="input-euro right">
<input type="text" />
</span>
CSS
.input-euro {
position: relative;
}
.input-euro.left input {
padding-left:18px;
}
.input-euro.right input {
padding-right:18px;
text-align:end;
}
.input-euro:before {
position: absolute;
top: 0;
content:"€";
}
.input-euro.left:before {
left: 5px;
}
.input-euro.right:before {
right: 5px;
}
Já que você não pode fazer ::before
com content: '$'
entradas e adicionar um elemento posicionado absolutamente adiciona html extra - eu gosto de fazer em um css SVG embutido de fundo.
É mais ou menos assim:
input {
width: 85px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='16px' width='85px'><text x='2' y='13' fill='gray' font-size='12' font-family='arial'>$</text></svg>");
padding-left: 12px;
}
Ele produz o seguinte:
Nota: o código deve estar em uma única linha. O suporte é muito bom em navegadores modernos, mas certifique-se de testar.
background-repeat: no-repeat;
conforme o $ se repetia na caixa de entrada.
background-image
pode não ser compatível ou o navegador pode renderizar o próprio widget em vez de usar os widgets fornecidos pelo sistema.
Acabei precisando que o tipo ainda permanecesse como um número, então usei CSS para empurrar o cifrão no campo de entrada usando uma posição absoluta.
<div>
<span style="position: absolute; margin-left: 1px; margin-top: 1px;">$</span>
<input type="number" style="padding-left: 8px;">
</div>
Coloque o '$' na frente do campo de entrada de texto, em vez de dentro dele. Isso torna a validação de dados numéricos muito mais fácil porque você não precisa analisar o '$' após o envio.
Você pode, com JQuery.validate () (ou outro), adicionar algumas regras de validação do lado do cliente que lidam com moeda. Isso permitiria que você tivesse o '$' dentro do campo de entrada. Mas você ainda tem que fazer a validação do lado do servidor para segurança e isso o coloca de volta na posição de ter que remover o '$'.
$<input name="currency">
Consulte também: Restringindo a entrada para caixa de texto: permitindo apenas números e casas decimais
Se você só precisa oferecer suporte ao Safari, pode fazer assim:
input.currency:before {
content: attr(data-symbol);
float: left;
color: #aaa;
}
e um campo de entrada como
<input class="currency" data-symbol="€" type="number" value="12.9">
Desta forma, você não precisa de uma tag extra e mantém as informações do símbolo na marcação.
Outra solução que prefiro é usar um elemento de entrada adicional para uma imagem do símbolo monetário. Aqui está um exemplo de uso da imagem de uma lupa em um campo de texto de pesquisa:
html:
<input type="image" alt="Subscribe" src="/graphics/icons/search-button.png">
<input type="text" placeholder="Search" name="query">
css:
#search input[type="image"] {
background-color: transparent;
border: 0 none;
margin-top: 10px;
vertical-align: middle;
margin: 5px 0 0 5px;
position: absolute;
}
Isso resulta na entrada na barra lateral esquerda aqui:
Acabei de usar: antes com a entrada e passei $ como o conteúdo
input{
margin-left: 20px;
}
input:before {
content: "$";
position: absolute;
}
.currencyinput {
border: 1px inset #ccc;
padding-bottom: 1px;//FOR IE & Chrome
}
.currencyinput input {
border: 0;
}
<span class="currencyinput">$<input type="text" name="currency"></span>
Nenhuma dessas respostas realmente ajuda se você estiver preocupado em alinhar a borda esquerda com outros campos de texto em um formulário de entrada.
Eu recomendo posicionar o cifrão absolutamente à esquerda cerca de -10px ou 5px à esquerda (dependendo se você quiser dentro ou fora da caixa de entrada). A solução interna requer direção: rtl no css de entrada.
Você também pode adicionar preenchimento à entrada para evitar a direção: rtl, mas isso irá alterar a largura do contêiner de entrada para não corresponder aos outros contêineres da mesma largura.
<div style="display:inline-block">
<div style="position:relative">
<div style="position:absolute; left:-10px;">$</div>
</div>
<input type='text' />
</div>
ou
<div style="display:inline-block">
<div style="position:relative">
<div style="position:absolute; left:5px;">$</div>
</div>
<input type='text' style='direction: rtl;' />
</div>
https://i.imgur.com/ajrU0T9.png
Exemplo: https://plnkr.co/edit/yshyuRMd06K1cuN9tFDv?p=preview
<style>
.currencyinput {
border: 1px inset #ccc;
border-left:none;
}
.currencyinput input {
border: 0;
}
</style>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="text" oninput="this.value = this.value.replace(/[^0-9]/.g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" style="text-align:right;border-right:none;outline:none" name="currency"><span class="currencyinput">%</span>
</body>
</html>
%
Sim, se você estiver usando bootstrap, isso funcionaria.
.form-control input {
border: none;
padding-left: 4px;
}
e
<span class="form-control">$ <input type="text"/></span>
.currencyinput {
border: 1px inset #ccc;
border-left:none;
}
.currencyinput input {
border: 0;`enter code here`
}
<input type="text" oninput="this.value = this.value.replace(/[^0-9]/.g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" style="text-align:right;border-right:none;outline:none" name="currency"><span class="currencyinput">%</span>