Some text some message..
Some text some message..
Some text some message..
Some text some message..

Silahkan atau queue Daftar disini.

  • Beranda
  • »
  • Forum
  • »
  • Mengubah Warna Border Pada Input Text Saat Focus Elemen CSS

Mengubah Warna Border Pada Input Text Saat Focus Elemen CSS

Ardianto

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>

Tags : tag iconhtml tag iconcss

  

facebooktwitterwhatapplinkedinpinterest

comment2 Jawaban, 128 view

Daniel Husein

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;
}
  

Ahmad Daud

Ahmad Daud

06 Nov 2022, 09:30:05

Menggunakan HTML tag langsung :

input: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;
}
  
Forum ini dibuat untuk menanyakan seputar permasalahan yang sering terjadi pada proses pembuatan halaman web pada HTML, desain web (CSS), pemrograman sisi client (JavaScript), pemrograman sisi server (PHP, ASP) beserta framework turunannya seperti codeigniter, Laravel, Yii. Forum ini tidak membatasi pertanyaan lainnya untuk bahasa program yang berbeda dengan orientasi website pada perangkat desktop dan smartphone.

Silahkan atau queue Daftar disini.

News Letters

Silahkan masukkan email Anda untuk berlangganan informasi kami

Forum ini dibuat untuk menanyakan seputar permasalahan yang sering terjadi pada proses pembuatan halaman web pada HTML, desain web (CSS), pemrograman sisi client (JavaScript), pemrograman sisi server (PHP, ASP) beserta framework turunannya seperti codeigniter, Laravel, Yii. Forum ini tidak membatasi pertanyaan lainnya untuk bahasa program yang berbeda dengan orientasi website pada perangkat desktop dan smartphone.