Estilizar input html

Front-end
,
#1

Como remover esse contorno azul que aparece quando se clica dentro do input?

Capturar

#2

Tem como fornecer o html + css?

#5

HTML:

`<html><head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<title>Login</title>
	<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body>
	<!-- div container -->
	<div class="container">
		<!-- tela de login -->
		<div class="login-screen">
			<!-- formulário de login -->
			<form class="form">
				<h3 class="title">Login to continue</h3>
				<input type="email" placeholder="Email" class="inputs" />
				<input type="password" placeholder="Password" class="inputs" />
				<button class="btn">sign in</button>
				<a href="#">forgot your password?</a>
				<p class="description">create account?<a href="#">sign up</a></p>
			</form>
		</div>
	</div>
</body></html>`

CSS

`/*geral*/
*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

body{
	background: lightgray;
	font-family: 'open sans', sans-serif;
}

a{
	text-decoration: none;
	color: lightgray;
	font-size: 13px;
}

a:hover{
	color: #fff;
}

/*container*/
.container{
	width: 100%;
	height: 100%;
}

.login-screen{
	width: 240px;
	background: linear-gradient(purple, darkblue);
	border-radius: 15px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	padding-top: 50px;
	color: #fff;
	align-items: center;
	line-height: 50px;
}

.form{
	display: flex;
	flex-direction: column;
}

.inputs{
	width: 80%;
	margin: 0 auto;
	padding: 10px;
	border: none;
	margin-bottom: 10px;
	border-radius: 50px;
}

.btn{
	padding: 10px;
	width: 80%;
	margin: 0 auto;
	border-radius: 50px;
	border: none;
	text-transform: uppercase;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(to right, orangered, orange);
	cursor: pointer;
}

.description{
	color: lightgray;
	font-size: 13px;
	margin-top: 50px;
}

.description a{
	font-weight: 700;
}`
#6

Como postar o CSS também em ‘‘formato’’ de código?

#7

Olá Daniel, normalmente quando você utiliza no seu seletor a propriedade outiline: none; costuma resolver este tipo de problema. Espero ter ajudado. Abraço

1 curtida
#8

Certinho. Valeu!

#9

image

https://codepen.io/rangelthr/pen/KLermw

2 curtidas