Combobox styling/theming RSS

• • Reply
  

  sconly

  Member

  62 Points

  112 Posts

  Combobox styling/theming

  Apr 20, 2012 12:37 PM|LINK

  Hopefully this is in the right forum.

  On my page i have numerous dropdown and combobox controls and my issue is that when i change the Windows visual style colour scheme the appearance of the comboboxes isn't changing, yet the dropdowns are?

  I am currently using the Silver scheme on Windows XP and as you can see from the images below the dropdown appearance is in line the the theme but the combobox hasn't change.

  My question is how can i change the combobox to match the selected scheme, in the same way the dropdown does?

  combobox control...

  

  dropdown control...

  

  This is what i mean by Windows visual style colour scheme...

  

  If it's css some examples would be appreciated.

  Thanks

  • Edited by sconly on Apr 20, 2012 12:39 PM
• • Reply
  

  Bobby-Z

  Contributor

  2864 Points

  1125 Posts

  Re: Combobox styling/theming

  Apr 20, 2012 03:01 PM|LINK

  .ajax__combobox_inputcontainer .ajax__combobox_buttoncontainer button {background:#C7CDE8 url('Images/Gridview/SortDesc.gif') center center no-repeat; border:1px solid #6C8CC7;border-top-right-radius:3px; -moz-border-top-right-radius:3px; -webkit-border-top-right-radius:3px;border-bottom-right-radius:3px; -moz-border-bottom-right-radius:3px; -webkit-border-bottom-right-radius:3px;box-shadow: 2px 2px 3px #C7CDE8; -moz-box-shadow: 2px 2px 3px #C7CDE8; -webkit-box-shadow:2px 2px 3px #C7CDE8; }
  .ajax__combobox_textboxcontainer input[type="text"] {border: 1px solid #6C8CC7;border-bottom-right-radius:0px; -moz-border-bottom-right-radius:0px; -webkit-border-bottom-right-radius:0px; border-top-right-radius:0px; -moz-border-top-right-radius:0px; -webkit-border-top-right-radius:0px;border-top-left-radius:3px; -moz-border-top-left-radius:3px; -webkit-border-top-left-radius:3px;border-bottom-left-radius:3px; -moz-border-bottom-left-radius:3px; -webkit-border-bottom-left-radius:3px;width:210px; height:20px; font-size:11px; padding:1px 1px 1px 3px; margin-top:3px; float:left; box-shadow: 2px 2px 2px #98A5D4; -moz-box-shadow: 2px 2px 2px #98A5D4; -webkit-box-shadow: 2px 2px 2px #98A5D4}
  
  .ajax__combobox_itemlist {padding:5px; background:#EBEDEF; border:1px solid #6CC8CC7; padding:5px; border-bottom-left-radius:5px; -moz-border-bottom-left-radius:5px; -webkit-border-bottom-left-radius:5px; border-bottom-right-radius:5px; -moz-border-bottom-right-radius:5px; -webkit-border-bottom-right-radius:5px;}
  .ajax__combobox_itemlist li {list-style-image:none; margin:2px 2px 1px 5px; list-style-type:none; color:#00427A  }

  

  These are pretty much the items that make up a combobox:

  .ajax__combobox_inputcontainer

  .ajax__combobox_textboxcontainer

  .ajax__combobox_textboxcontainer input[type=text]

  .ajax__combobox_buttoncontainer

  .ajax__combobox_buttoncontainer button

  .ajax__combobox_itemlist

  .ajax__combobox_itemlist li

  
  of course you can add hover elements too

  "Success is the Sum of Small Efforts, Repeated Day in and Day Out - Without Ceasing!"
  
  Currently Learning: ASP, SQL, CSS, JavaScript, AJAX, XML, XSLT, C# So please be patient with me! Thanks
  • Marked as answer by BU XI - MSFT on Apr 27, 2012 03:01 AM