0

Existe alguna forma de agregar con css un asterisco a los labels solo si el input tiene el atributo required? Por ejemplo: Tengo un div que contiene este label y este input

<div class="form-group row">
    <label class="col-sm-3 col-form-label">Nombre</label>
    <div class="col-sm-9">
        <input type="text" required >
    </div>
</div>

Todo esto es sin agregar ninguna clase ni al label ni al input, solo usar los atributos.

Probé trabajando con pseudoclases de css pero no funciona Algo como esto:

form input:required {
   content:"*";
}

Funciona agregandolo en el input y lo que quiero es agregarlo en el label

7
  • label:before{ content: "*"; } no te sirve?
    – user128299
    el 20 abr. 2020 a las 20:21
  • Quizas esta respuesta te puede servir stackoverflow.com/a/11197803/10755706 el 20 abr. 2020 a las 20:22
  • ¿Solo aplicarlo cuando el input es required?
    – user128299
    el 20 abr. 2020 a las 20:24
  • Asi es solo cuando el campo es required el 20 abr. 2020 a las 20:28
  • ¿Se puede emplear Js o solamente con CSS?
    – user128299
    el 20 abr. 2020 a las 20:46

3 respuestas 3

2

Puedes crear una clase helper .is-required.

.is-required:after {
  content: '*';
  margin-left: 3px;
  color: red;
  font-weight: bold;
}
<div class="form-group row">
    <label class="col-sm-3 col-form-label is-required">Nombre</label>
    <div class="col-sm-9">
        <input type="text" required >
    </div>
</div>

1

hice un ejemplo con solo CSS, no es el mejor ejemplo pero funciona correctamente.

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<style>
	.form-group input:required~label::before {
		content: "* ";
		color: red;
		font-weight: bold;
	}
</style>

<body>

	<div class="container mt-4">
		<div class="row">
			<div class="col-12">
				<div class="card bg-light">
					<div class="card-body">
						<div class="form-group d-flex flex-row-reverse">
							<input type="text" class="col-sm-9 form-control" required>
							<label class="col-sm-3 col-form-label">Nombre</label>
						</div>
						<div class="form-group d-flex flex-row-reverse">
							<input type="text" class="col-sm-9 form-control">
							<label class="col-sm-3 col-form-label">Alias</label>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	</div>

</body>

</html>

1

He conseguido esto, recorriendo los inputs existentes en el DOM y comprobando su atributo, si este es required hago visible el span que contiene el "*". Por parte del html tengo dos inputs uno con el atributo "requiered" y otro que no lo tiene:

<label for="nombre">Nombre:</label>
<input type="text" name="nombre" required>
<span id="asterisco" style="display: none;">*</span><br>
<label for="nombre">Apellido:</label>
<input type="text" name="apellido">

El código Javascript es el siguiente:

<script>
   var elements = document.getElementsByTagName("input")
   for (var i = 0; i < elements.length; i++) {
       if(elements[i].required == true) {
           document.getElementById("asterisco").style.display = "inline";
       }
   }
</script>

Espero te sirva.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.