0

I'm trying to make a search bar in my asp.net project, and so far I only know how to use CSS/bootstrap to make the button which works well with the css effects I've added. How do I change my codes to use an asp.net button instead - without compromising on my css effects? This is how an asp.net button looks like:

<asp:Button ID="Button1" runat="server" Text="Button" />

I'm changing to an asp.net button because I realised that the CSS/bootstrap button doesn't have the onclick needed to bring me to code view in asp.net (because I need to add C# codes into the button).

Here is my how my button looks like currently:

<div class="sb_container">
      <input type="text" placeholder="Search..." id="sew_searchBox" class="search"> </input>

      <button class="icon" onclick="keyotiSearchBox.doSearch()"></button> 
  </div>

I've added Css in this button as well:

   .sb_container{
      overflow: hidden;
      width: 220px;
      vertical-align: middle;
      white-space: nowrap;
   }

   .sb_container input.search{ 
      width: 200px; 
      height: 35px; 
      background: #FFF; 
      border: none; 
      font-size: 10pt; 
      float: left; 
      color: #000000; 
      padding-left: 15px; 
      -webkit-border-radius: 5px; 
      -moz-border-radius: 5px; 
      border-radius: 5px;
       }
   .sb_container input.search::-webkit-input-placeholder { color: black;}
   .sb_container input.search:-moz-placeholder { /* Firefox 18- */ color: black; }
   .sb_container input.search::-moz-placeholder {  /* Firefox 19+ */ color: black; }
  .sb_container input.search:-ms-input-placeholder {  color: black; }

  .sb_container button.icon {
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border: none;
    background: #f7f7f7;
    height: 35px;
    width: 50px;
    color: #4f5b66;
    opacity: 0;
    font-size: 10pt;

   -webkit-transition: all .55s ease; 
      -moz-transition: all .55s ease; 
      -ms-transition: all .55s ease; 
      -o-transition: all .55s ease; 
      transition: all .55s ease;
}

    .sb_container:hover button.icon, .sb_container:active button.icon, .sb_container:focus button.icon{ 
      outline: none; 
      opacity: 1; 
      margin-left: -50px;
      background-image:url('search.png');    
      background-repeat: no-repeat;  
      background-position: center; 
}

.sb_container:hover button.icon:hover{ 
      background: #f7f7f7;
      background-image:url('search.png');    
      background-repeat: no-repeat;background-position: center; 
}
  • Have you added the same css to your asp.net control? Should render html that then responds to your .search class. – Nathaniel Flick Jul 15 '16 at 13:50
  • Hi sorry, could you rephrase the 2nd part? I don't quite understand (sorry my english comprehension isn't very good) –  Jul 15 '16 at 14:26
  • I'm not sure what you meant, but I changed my css with the asp.net button's id: Button1. Here it is (an example) , but it doesn't work, my css effects aren't working: `.sb_container:hover #Button1:hover{ background: #f7f7f7; background-image:url('search.png'); background-repeat: no-repeat;background-position: center; }` –  Jul 15 '16 at 14:37
  • You can override bootstrap css if you load your css file after bootstrap css. This is common practice. – Nathaniel Flick Jul 15 '16 at 14:47
  • http://stackoverflow.com/questions/12177630/how-to-set-css-style-to-asp-net-button I found this example which really helped me –  Jul 15 '16 at 15:41

0 Answers0