javascript - 摆脱联系人表单中的灰色字体和文本框边框

Question

为网站制作基本联系表。使用来自 here 的模板

使用这个 jsfiddle: https://jsfiddle.net/q7mzbpof/

我想知道当您单击输入内容时，如何去掉围绕它的灰色文本和蓝色 block 栏。如果我没有找到更好的联系表单模板选项，我很乐意接受并使用它们。这是我能够找到的第一个看起来足够简单的工作。

function kaderValidation()
{
var name1 = document.registration.fname;
var name2 = document.registration.lname;
var addy = document.registration.address;
var mnum = document.registration.Mnumber;
var mailat = document.registration.email;

 if(fname_validation(name1))
{
if(lname_validation(name2))
{
if(alphanumeric(addy))
{ 
if(nums(mnum))
{
if(ValidateEmail(mailat))
{
if(validsex(umsex,ufsex))
{
}
} 
}
} 
}
}
return false;
} function fname_validation(name1)
{
var name1_len = name1.value.length;
if (name1_len == 0 )
{
alert("Please enter your first name");
name1.focus();
return false;
}
return true;
}
function lname_validation(name2)
{
var name2_len = name2.value.length;
if (name2_len == 0 )
{
alert("Please enter your last name");
name2.focus();
return false;
}
return true;
}
function alphanumeric(addy)
{ 
var letters = /^[0-9a-zA-Z]+$/;
if(addy.value.match(letters))
{
return true;
}
else
{
alert('Please enter the adress in format Countrty-City-Streetnumber without spaces');
addy.focus();
return false;
}
}
function nums(mnum)
{ 
var digits = /^[0-9]+$/;
if(mnum.value.match(digits))
{
return true;
}
else
{
alert('Please enter your Mobile number');
mnum.focus();
return false;
}
}
function ValidateEmail(mailat)
{
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(mailat.value.match(mailformat))
{
return true;
}
else
{
alert("Please enter a valid email address");
return false;
}

Answer 1

为了可访问性，我建议不要这样做，但尽管如此，您可以使用一些简单的 CSS 来完成。

input:focus {
  outline: none; /* gets rid of the blue outline on focus */
}

input:focus::-moz-input-placeholder {
    opacity: 0; /* hides the gray plceholder text in firefox */
}

input:focus::-webkit-input-placeholder {
    opacity: 0; /* hides the gray plceholder text in Chrome/Safari */
}