CSS элемента управления текстовым полем asp

ProgramBox

CSS элемента управления текстовым полем asp

Post author:admin
Запись опубликована:21 мая, 2023
Post category:Вопросы по программированию

#asp.net #css #textbox #stylesheet

#asp.net #css #текстовое поле #таблица стилей

Вопрос:

У меня есть элемент управления текстовым полем ASP. Когда пользователь фокусируется на текстовом поле, я хочу изменить цвет фона текстового поля с серого на белый.

вот файл css, но его цвет не меняется после фокусировки на текстовом поле.

      <script language="javascript" type="text-javascript">
     function DoFocus(txt) 
     {
         txt.className = 'focus';
     }    
   </script>

Текстовое поле

     <asp:TextBox ID="txtFirstName" runat="server"
        CssClass="textbox" MaxLength="50" Width="188px" onfocus="DoFocus(this)">

CSS

 input.textbox, select, textarea
{
  font-family    :  verdana, arial, snas-serif;
  font-size      :  11px;
  color          :  #000000;

  padding        :  3px;
  background     :  #f0f0f0;
  border-left    :  solid 1px #c1c1c1;
  border-top     :  solid 1px #cfcfcf;
  border-right   :  solid 1px #cfcfcf;
  border-bottom  :  solid 1px #6f6f6f;
}

input.textbox:focus, input.input_text_focus
{
    border-color:#646464;
    background-color:#ffcf03;
}

Ответ №1:

РЕДАКТИРОВАТЬ: Я видел, что вы обновили свой пост, поэтому поясню: ASP создает input HTML-элемент (поправьте меня, если я ошибаюсь), и вы всегда можете оформить это с помощью :focus селектора в CSS, Javascript не нужен, но также добавить input.textbox:active , чтобы поймать какой-нибудь глючный IE…

 input.textbox:focus, input.textbox:active {
   /* everything you put here will be aplied to ANY focused input element */
}

Судя по вашему вставленному коду, вместо

 .input_text:focus, input.input_text_focus {
    border-color:#646464;
    background-color:#ffffc0;
}

использовать

 input.textbox:focus, input.input_text_focus {
   ...
}

Или почему вы вдруг используете класс, input_text когда у вас есть input.textbox из первых рук? Ваши два селектора не совпадают…

1. просто одна вещь, которую я хотел спросить, почему выделение работает, когда я добавляю стиль вручную на страницу aspx, а не в таблицу стилей?

2. Возможно, это связано с тем, что существуют другие стили, заимствуемые из какой-то другой таблицы стилей … попробуйте использовать background-color: #ffffc0 !important; …

3. ну, я только что сослался только на 1 таблицу стилей на своей странице. я использую только 1 в своем проекте

4. Я еще не работал с ASP, поэтому не могу сказать вам, генерирует ли он какую-то таблицу стилей по умолчанию сам по себе. Еще одна вещь, которую следует учитывать, это то, что браузеры имеют таблицы стилей по умолчанию, попробуйте включить reset.css (погуглите это;). Встроенные стили (ввод их непосредственно на вашей странице) работают, потому что они более «специфичны», вы также можете попробовать добавить больше селекторов, например, #content form input.textbox:focus если ваша форма содержится в div с id content …

Ответ №2:

Здесь предлагается подход с использованием отдельных классов CSS, указанных через javascript:

 <style type="text/css">
    input.FocusedStyle
    {
        background-color:#ffffc0;
        border-color:#646464;
    }
</style>

<script type="text/javascript">
    function OnBlur(textBox) {
        textBox.className = '';
    }
    function OnFocus(textBox) {
        textBox.className  = ' FocusedStyle';
    }
</script>

<asp:TextBox ID="txt" runat="server" onblur="OnBlur(this);" onfocus="OnFocus(this);"></asp:TextBox>

Ответ №3:

   TEXTAREA, INPUT[type="text"]
  {
    font-family    :  tahoma, arial, snas-serif;
    font-size      :  11px;
    color          :  #000000;

    padding        :  3px;
    background     :  #EEEfff;
    border-left    :  solid 1px #c1c1c1;
    border-top     :  solid 1px #cfcfcf;
    border-right   :  solid 1px #cfcfcf;
    border-bottom  :  solid 1px #6f6f6f;
  }

  INPUT[type="text"]:focus, INPUT[type="text"]:active 
  {
      border-color:#646464;
      background-color:#ffcf03;
  }

1. Хороший ответ, насколько я знаю, но в целом вы должны попытаться оставить комментарий, объясняющий, что вы сделали … ответы только для кода не одобряются.

2. Старый, я знаю, но это намного лучше, чем использовать JavaScript для настройки фокуса. Использование псевдоклассов.

Ответ №4:

Вы не можете сделать это, просто используя css. вы также должны использовать javascript. Например:

 <asp:TextBox runat="server" id="myTextbox" onfocus="DoFocus(this)" onblur="DoBlur(this)"></asp:TextBox>

раздел javascript:

 <script language="javascript" type="text/javascript">
  function DoFocus(txt) 
  {
      txt.className = 'focus';
  }          

  function DoBlur(txt) 
  {
      txt.className = 'unfocus';
  }
</script>

и css:

 input.textbox, select, textarea, unfocus
{
 font-family    :  verdana, arial, snas-serif;
 font-size      :  11px;
 color          :  #000000;
 padding        :  3px;
 background     :  #f0f0f0;
 border-left    :  solid 1px #c1c1c1;
 border-top     :  solid 1px #cfcfcf;
 border-right   :  solid 1px #cfcfcf;
border-bottom  :  solid 1px #6f6f6f;
}

.focus
{
    border-color:#646464;
    background-color:#ffffc0;
}

Вы можете найти несколько хороших примеров на:
http://www.codeproject.com/KB/aspnet/inputBgOnFocus.aspx
http://viralpatel.net/blogs/2009/09/change-form-input-textbox-style-focus-jquery.html
http://forums.asp.net/t/1134964.aspx/1

1. я сделал то, что вы сказали, но это не работает … я отредактировал код в основном сообщении….

2. Извините. Забыл изменить имя класса css. Обновил ответ, посмотрите на имя класса CSS. это должно быть focus

3. Также тип должен быть text/javascript . виноват!