Ardianto
06 Nov 2022, 09:04:05
Bagaimana cara mengubah input tipe text saat sedang focus pada elemen? Saya punya kendala pada input dengan warna latar gelap (initial) pada tag body. Tampilan input text pada beberapa browser berbeda-beda. Warna latarnya ada yang gelap ada juga yang warna putih, yang diharapkan putih.
Saya ingin mengubah kesuruhan warna latar (putih), depan (#333) agar tampilan pada semua browser sama dan sekaligus warna border saat input sedang focus. Terima kasih.
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
body{
padding:10px;
background-color:#222;
color:#bbb;
text-align:center;
}
h1{color:#ccc;}
form{width:380px;margin-left:auto;margin-right:auto;}
input{width:100%;padding:5px;color:#333;height:40px;}
button{margin:10px 0;width:100%;height:55px;}
.left_{text-align:left;margin-bottom:7px;}
</style>
</head>
<body>
<div class="row" style="margin:0">
<div class="col-md-2"></div>
<div class="col-md-8">
<h1>Login</h1>
<form action="login.php" method="post">
<p class="left_">Email</p>
<p><input type="text" name="email" autocomplete="off"></p>
<p class="left_">Password</p>
<p><input type="password" name="password"></p>
<p><button type="submit" class="btn btn-primary"> Login</button></p>
<p>Lupa <a href=''>Password?</a> | Atau <a href=''>Mendaftar di sini </a> secara gratis</p>
</form>
</div>
<div class="col-md-2"></div>
</body>
</html>
2 Jawaban, 1.297 view
Ahmad Daud
06 Nov 2022, 09:30:05
Menggunakan HTML tag langsung :
htmlinput:focus{
outline: none;
border:1px solid green;
Menggunakan ID :
#MyInput:focus{
outline: none;
border:1px solid green;
}
Menggunakan Class :
.myInput:focus{
outline: none;
border:1px solid green;
}Apakah ingin menghapus konten ini?
Apakah ingin menghapus komentar ini?
Paling Banyak Dibaca Pada Forum
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
Daniel Husein
06 Nov 2022, 09:27:45
Tampilan input secara default warna latarnya memang putih dengan warna hitam sebagai warna depannya. Tapi jika body di beri warna latar misalnya warna #000, beberapa browser akan menerapkan warna latar juga input ikut body.
Untuk menghindari hal ini warna input perlu di definisi ulang, dan masalah akan terjadi saat elemen input diberi focus. Warna bordernya juga perlu didefinisi ulang lagi.
Untuk pemberian gaya di atas bisa menggunakan..
input{color:#333;background-color:#fff;width:100%;padding:5px;height:40px;} input:focus { outline: none !important; border-color: #CF0A0A; box-shadow: 0 0 10px #CF0A0A; }