• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 68
  • Last Modified:

Effect on button

Hi,
I have
          input[type="button"]
          {
            -moz-border-radius: 7px;
             border-radius: 7px;
              border:solid 1px gray;
              padding:7px;
          }

Open in new window

but I do not see the effect to the buttons on the page. Why?
1
HuaMinChen
Asked:
HuaMinChen
  • 4
  • 3
  • 2
  • +1
3 Solutions
 
Kim WalkerWeb Programmer/TechnicianCommented:
The most likely reason would be that there is another style that's overriding this one. This one works for me. Can you post a link to the problem page?

Another possibility is that you are using a <button> tag instead of an <input type="button"> tag.
0
 
HuaMinChenBusiness AnalystAuthor Commented:
Can you please refer to this?
http://my-friend.co/Own_rec3/Default.aspx?userid=NEW

as I want to have round corner on both Save and Cancel buttons.
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
This is from your source code. You can see the type is submit instead of button.
    <input type="submit" name="bt_save" value="Save" id="bt_save" accesskey="S" style="width:130px;" />
    <input type="submit" name="bt_cancel" value="Cancel" id="bt_cancel" accesskey="C" disabled="disabled" class="aspNetDisabled" style="width:130px;" />

Open in new window

Adjust your CSS accordingly. (See line 1)
          input[type="submit"]
          {
            -moz-border-radius: 7px;
             border-radius: 7px;
              border:solid 1px gray;
              padding:7px;
          }

Open in new window

0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
HuaMinChenBusiness AnalystAuthor Commented:
Sorry, I am not sure if the details you see is really having some difference from the codes I'm talking about. What to adjust to these?

    <asp:Button runat="server" Enabled="false" id="bt_save" Text="Save" AccessKey="S" width="130px" OnClick="save_click" />
    <asp:Button runat="server" id="bt_cancel" Text="Cancel" AccessKey="C" width="130px" OnClick="cancel_click" />

Open in new window

0
 
pradeep kumarSr. UI Developer Commented:
Hi,

you can do this like also:

input#bt_save
{
-moz-border-radius: 7px;
             border-radius: 7px;
              border:solid 1px gray;
              padding:7px;
}

thanks
0
 
HuaMinChenBusiness AnalystAuthor Commented:
I put this
           input[type="button"]
          {
            -moz-border-radius: 7px;
             border-radius: 7px;
              border:solid 1px gray;
              padding:7px;
          }

Open in new window

but I still do not see the effect after I've re-published the project.
0
 
pradeep kumarSr. UI Developer Commented:
Hi,

please see attached screenshot in your code submit button showing type="submit" not button than how above css will apply on that.

You have to 2 things for that.

1) change the input[type="submit"] or
2) work with input type id="bt_save"

just change the 1st line of your css it will work.

thanks
submit.PNG
0
 
HuaMinChenBusiness AnalystAuthor Commented:
Sorry, I do not know where

type="submit"

is, as I only see these codes
    <asp:Button runat="server" Enabled="false" id="bt_save" Text="Save" AccessKey="S" width="130px" OnClick="save_click" />
    <asp:Button runat="server" id="bt_cancel" Text="Cancel" AccessKey="C" width="130px" OnClick="cancel_click" />

Open in new window

0
 
pradeep kumarSr. UI Developer Commented:
If you don't have access to change in your code than please change in your css. Or you can do it by #id to apply the effects.

thx
0
 
Julian HansenCommented:
You have this style in your CSS
         input[type="bt_save"]
          {
            -moz-border-radius: 7px;
             border-radius: 7px;
              border:solid 1px gray;
              padding:7px;
          }

Open in new window

Which does nothing - you can remove it
As suggested in the posts above replace it with
         input[type="submit"]
          {
            -moz-border-radius: 7px;
             border-radius: 7px;
              border:solid 1px gray;
              padding:7px;
          }

Open in new window

0
 
Julian HansenCommented:
Alternatively - just give the buttons you want to have rounded corners a class
    <asp:Button runat="server" Enabled="false" id="bt_save" Text="Save" AccessKey="S" width="130px" OnClick="save_click" class="rounded"/>
    <asp:Button runat="server" id="bt_cancel" Text="Cancel" AccessKey="C" width="130px" OnClick="cancel_click" class="rounded"/>

Open in new window


.rounded {
  border-radius: 7px;
  border: 1px solid gray;
  padding: 7px;
}

Open in new window

1

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 4
  • 3
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now