Блог

Главная - Вопросы по программированию - Стиль AJAX формы Javascript

Стиль AJAX формы Javascript

#javascript #ajax

#javascript #ajax

Вопрос:

Я использую следующий код для создания простой формы. Как мне сделать так, чтобы, когда кто-то нажимает на одно из полей ввода, граница меняла цвет? Заранее спасибо

 <style>
.texta {  
  color: #CDCBCB;  
  background-color: #FFFFFF;  
  border: 1px solid #E2E2E2;
  font-style:italic
}  

.sendbutton {
    background:#F6F6F6; color:#999999;
    border: 1px solid #E2E2E2;  
    cursor:pointer;
    padding:5px 10px;
    -webkit-border-radius:8px
}
</style>


<form action="mailto:email@email.com" method="post" enctype="text/plain">
<div style="height:12px;"><input type="text" name="name" value="Name (required)" size="40" class="texta"></div><br>
<div style="height:12px;"><input type="text" name="mail" value="Email (required)" size="40" class="texta"></div><br>
<div style="height:12px;"><input type="text" name="comment" value="Subject (required)" size="40" class="texta"></div><br>
<textarea name="Message" value="Message (required)" cols="40" rows="6" class="texta"></textarea><br>
<br><input type="submit" value="amp;nbsp; amp;nbsp; Send amp;nbsp;amp;nbsp;" class="sendbutton">
</form>

Комментарии:

1. Вы случайно не используете jQuery?

2. Нет, это не так, это сделало бы все намного проще. Спасибо за идею.

Ответ №1:

Добавьте правило CSS для .texta:focus и установите border-color .

Ответ №2:

Вы также можете сделать это с помощью jQuery. Просто скачайте jQuery (http://jquery.com /) и поместите этот код в свой …. Но я думаю, что решение CSS лучше.

 <script>
    $("input:text")
    .focus(function(){
        $(this).css("border-color", "#F00");
    })
    .focusout(function(){
        $(this).css("border-color", "#333");
    });
</script>
Метки: