I already tried several solutions found online on this website and many others but nothing solved the problem. I tried
Outline:0;, Outline:none;, box-shadow:none;, tried specifying a class etc. etc.
I created my own stylish button and the blue glow being put around it looks very ugly.
It's also important I can remove it, as I'm creating a multi-page form (survey) with 3 buttons below each page, I don't want one of them to have a blue outline. They should all look the same.
I can't provide a links since I work offline.
This is my code:
a.button,
input[type='reset'],
input[type='button'],
input[type='submit'],
input[type='submit']:focus
{
-moz-border-radius: 2px;
-moz-box-shadow: 1px 1px 2px 2px rgba(255, 255, 255, 0.1);
-webkit-box-shadow: 1px 1px 2px 2px rgba(255, 255, 255, 0.1);
-webkit-border-radius: 2px;
background-color: #f9f9f9; /* Alabaster */
background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f1f1f1));
background-image: -webkit-linear-gradient(top, #f9f9f9, #f1f1f1);
background-image: -moz-linear-gradient(top, #f9f9f9, #f1f1f1);
background-image: -ms-linear-gradient(top, #f9f9f9, #f1f1f1);
background-image: -o-linear-gradient(top, #f9f9f9, #f1f1f1);
background-image: linear-gradient(top, #f9f9f9, #f1f1f1);
box-shadow: 1px 1px 2px 0px rgba(226, 226, 226, 0.8);
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
border: 1px solid #dddddd;
color: #000000;
cursor: pointer;
display: inline-block;
min-width: 100px;
width: 120px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f9f9f9, endColorstr=#f1f1f1);
font-size: 14px;
font-weight: 700;
line-height: 20px;
margin: 0;
padding: 4px 0px;
text-decoration: none;
vertical-align: middle;
white-space: nowrap;
outline:transparent;
}
<span style="float:left;">
<span style="direction:rtl;float:left;margin-right:10px;">
<input type="submit" name="_NNext" class="mrNext" style="width: 70px;" value="Volgende" alt="Volgende"></input>
<input type="submit" name="_NPrev" class="mrPrev" style="width: 70px;" value="Vorige" alt="Vorige"></input>
</span>
<input type="submit" name="_NStop" class="mrStop" style="width: 70px;" value="Stop" alt="Stop"></input>
</span>
Related
Okay here is the style sheet code: I want the ButtonTrans.png to be across each button on top auto fitting the size of the button.
.ButtonPanel {
position: absolute;
top: 0px;
left: 770px;
width: 500px;
height: 44px;
font-size: 12px;
font-weight: bold;
margin: 0px !important;
padding: 0px !important;
}
.functionbutton {
padding: 8px 4px;
margin: 6px 6px;
background: #3292aa;
background: -webkit-linear-gradient(top, #3292aa 0, #017795 100%);
background: linear-gradient(to bottom, #3292aa 0, #017795 100%);
border-color: #017795;
box-shadow: none;
color: #fff;
border-radius: 7px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
cursor: pointer;
}
.functionbutton:hover {
background: #33a3c0 !important;
background: -webkit-linear-gradient(top, #33a3c0 0, #038eb2 100%) !important;
background: linear-gradient(to bottom, #33a3c0 0, #038eb2 100%) !important;
box-shadow: none !important;
border-color: #038eb2 !important;
}
.toolbutton {
padding: 8px 4px;
margin: 6px 6px;
background: #f8f8f8;
background: -webkit-linear-gradient(top, #f8f8f8 0, #f2f2f2 100%);
background: linear-gradient(to bottom, #f8f8f8 0, #f2f2f2 100%);
border-color: #ccc;
box-shadow: 0 1px 0 0 #fff inset;
outline: 0;
border: 1px solid #ccc;
text-decoration: none;
border-radius: 7px;
text-decoration: none;
display: inline-block;
font-size: 12px;
cursor: pointer;
}
.toolbutton:hover {
background: #fdfdfd !important;
background: -webkit-linear-gradient(top, #fdfdfd 0, #fafafa 100%) !important;
background: linear-gradient(to bottom, #fdfdfd 0, #fafafa 100%) !important;
border-width: 1px !important;
border-style: solid !important;
}
And here is the HTML for the actual buttons within the page. I want the ButtonTrans.png to be the same size as each button and reside directly on top of the button to give the effect the button was clicked. I can not change any of the server side code currently so this will have to be the fix for now. I have attached a image of what I am looking for. I picture i have attached has style="postions:absolute;height:30px;width100px:" values added.
and idea of what I am trying to do
<asp:Panel ID="ButttonPanel" runat="server" CssClass="ButtonPanel">
<div class="toolbutton">
<label id="FlatPDFLbl">PDF</label>
<asp:ImageButton ID="FlatPDFBtn" runat="server" runat="server" ImageUrl='<%# "App_Themes/" + Session["Theme"] + "/Images/ButtonTrans.png"%>' ToolTip="Create Flat PDF from Template" TabIndex="-1" OnClick="FlatPDFBtn_Click"></asp:ImageButton>
</div>
<div class="toolbutton">
<label id="FullPDFLbl">Fillable PDF</label>
<asp:ImageButton ID="FullPDFBtn" runat="server" runat="server" ImageUrl='<%# "App_Themes/" + Session["Theme"] + "/Images/ButtonTrans.png"%>' ToolTip="Create Fillable PDF from Template" TabIndex="-1"
OnClick="FullPDFBtn_Click"></asp:ImageButton>
</div>
<div class="functionbutton">
<label id="SaveLbl">Save</label>
<asp:ImageButton ID="SaveBtn" CssClass="SaveBtn" runat="server" commandname="Launch" ImageUrl='<%# "App_Themes/" + Session["Theme"] + "/Images/ButtonTrans.png"%>' ToolTip="Save changes to this customer" TabIndex="-1" OnClick="SaveBtn_Click"></asp:ImageButton>
</div>
</asp:Panel>
I'm quite new to CSS and need some help make a mobile edge using CSS.
How can we draw the mobile device edge using CSS? This is what I have tried but unable to do so.
*,
*:after,
*:before {
box-sizing: border-box;
}
.mobile {
background: #E0E0E0;
background-image: -webkit-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: -moz-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: -ms-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: -o-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: linear-gradient(to bottom, #E0E0E0, #AEAEAE);
-webkit-border-radius: 9;
-moz-border-radius: 9;
border-radius: 9px;
text-shadow: 0px 0.5px 0px #fff;
font-family: Courier New;
color: #555555;
width: 20%;
height: 40%;
font-size: 41px;
padding: 10px 20px 10px 20px;
border: solid #616161 1px;
text-decoration: none;
position: absolute;
box-shadow: 0px 2px 2px #555555;
margin: 1px;
outline: #666666 solid 2px
}
.mobile:hover {
text-decoration: none;
}
<div class="mobile"></div>
This is what it should look like :
How do we do that?
I would double up on your box-shadow declaration instead of trying to wrangle outline:
box-shadow: 0px 0px 0px 1px #666666, 0px 2px 2px #555555;
*,
*:after,
*:before {
box-sizing: border-box;
}
.mobile {
background: #E0E0E0;
background-image: -webkit-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: -moz-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: -ms-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: -o-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: linear-gradient(to bottom, #E0E0E0, #AEAEAE);
-webkit-border-radius: 9;
-moz-border-radius: 9;
border-radius: 9px;
text-shadow: 0px 0.5px 0px #fff;
font-family: Courier New;
color: #555555;
width: 20%;
height: 40%;
font-size: 41px;
padding: 10px 20px 10px 20px;
border: solid #616161 1px;
text-decoration: none;
position: absolute;
box-shadow: 0px 0px 0px 1px #666666, 0px 2px 2px #555555;
margin: 1px;
}
.mobile:hover {
text-decoration: none;
}
<div class="mobile"></div>
The 0px 0px 0px 1px #666666 syntax gives the shadow zero blur and a 1px offset, essentially replicating a 1px stroke.
Try this one
*,
*:after,
*:before {
box-sizing: border-box;
}
.mobile {
background: #E0E0E0;
background-image: -webkit-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: -moz-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: -ms-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: -o-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: linear-gradient(to bottom, #E0E0E0, #AEAEAE);
-webkit-border-radius: 9;
-moz-border-radius: 9;
border-radius: 9px;
text-shadow: 0px 0.5px 0px #fff;
font-family: Courier New;
color: #555555;
font-size: 41px;
border: solid #616161 1px;
text-decoration: none;
box-shadow: 0px 1px #555555;
margin: 1px;
display: flex;
}
.mobile:hover {
text-decoration: none;
}
<div style="width: 210px; height: 45px; border: solid #000 1px;" class="mobile">
<div style="width: 210px; height: 45px; border: solid #fff 1px; " class="mobile">
<div style="width: 200px; height: 40px;" class="mobile">
</div>
</div>
</div>
Hello I was wondering how to make spoiler text on a website with html/css. What I was is, text that is black with black background, but when hovered over, makes the black text turn white, making it visible.
like this
<span style="color: black; background: black;">test</span>
<p>Then when hovered over</p>
<span style="color: white; background: black;">test</span>
The <details> HTML tag was designed specifically for this purpose. Here is the example from the MDN docs. Unfortunately, IE and edge don't support this tag as of January 2019.
<details>
<summary>Details</summary>
Something small enough to escape casual notice.
</details>
.spoiler, .spoiler2{
color: black;
background-color:black;
}
.spoiler:hover{
color: white;
}
.spoiler2:hover {
background-color:white;
}
<span class="spoiler" >test</span>
<p>Then when hovered over</p>
<span class="spoiler2"> other test </span>
Similar to spoiler in Disqus comments.
.spoiler{
background-color: gray;
color: transparent;
user-select: none;
}
.spoiler:hover{
background-color: inherit;
color: inherit;
}
<h3>In the movie, <span class="spoiler">the hero kills his wife.</span></h3>
I have been spoilers on forums (including my own) that are not just text with the background color changed.
They have the content hidden until you click a show/hide toggle button.
I want to add a section to a site that doesn't show up by default to save space.
https://jsfiddle.net/clarle/bY7m4/
That seems like it will meet my needs.
HTML
<div class="forum-post">
Show spoiler
Hide spoiler
<div class="spoiler">
<p class="spoiler-content">People die when they are killed!</p>
</div>
</div>
CSS
.spoiler {
display: none;
}
.show {
display: none;
}
.hide:target + .show {
display: inline;
}
.hide:target {
display: none;
}
.hide:target ~ .spoiler {
display: inline;
}
/* Just for prettiness, not actually needed */
body {
margin: 0;
padding: 20px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
color: #333333;
background-color: #ffffff;
}
.btn {
padding: 4px 12px;
margin-bottom: 0;
*margin-left: .3em;
font-size: 14px;
line-height: 20px;
color: #333333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
*background-color: #e6e6e6;
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
background-repeat: repeat-x;
border: 1px solid #bbbbbb;
*border: 0;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-bottom-color: #a2a2a2;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
*zoom: 1;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
text-decoration: none;
}
.forum-post {
padding: 20px;
border: 1px solid #000;
}
.spoiler-content {
padding: 15px;
}
I think the titles says it all. I want to style a css link to look like a button. I have this code here:
.botsup {
padding:5px;
background:#ffae00; /*fallback for browsers that don't support gradients*/
background: -webkit-linear-gradient(top, #ffae00, #d67600);
background: -moz-linear-gradient(top, #ffae00, #d67600);
background: -o-linear-gradient(top, #ffae00, #d67600);
background: linear-gradient(top, #ffae00, #d67600);
border:4px outset #dad9d8;
border: 3px solid #999;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 20px;
/*give the button a drop shadow*/
-webkit-box-shadow: rgba(0, 0, 0, .55) 0 1px 6px;
-moz-box-shadow: rgba(0, 0, 0, .55) 0 1px 6px;
box-shadow: rgba(0, 0, 0, .55) 0 1px 6px;
text-decoration:none;
display: block;
width: 82%;
line-height: 190%;
font-family: "Arial";
text-align: center;
vertical-align: middle;
font-weight: bolder;
font-size: 98.5%;
color: gray;
}
It works fine, but I want to set the button width despite of its text length, and I want to do it by using % insted of px. Is there a way?
Yes - there is.
Set:
display:inline-block;
and remove
width: 82%;
http://jsfiddle.net/5jd5h/6/
New css:
.botsup {
padding:5px;
display: inline-block;
line-height: 190%;
font-family: "Arial";
text-align: center;
vertical-align: middle;
font-weight: 700;
font-size: 98.5%;
color: gray;
background: #ffae00;
background: -webkit-linear-gradient(top, #ffae00, #d67600);
background: -moz-linear-gradient(top, #ffae00, #d67600);
background: -o-linear-gradient(top, #ffae00, #d67600);
background: linear-gradient(top, #ffae00, #d67600);
border:4px outset #dad9d8;
border: 3px solid #999;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: rgba(0, 0, 0, .55) 0 1px 6px;
-moz-box-shadow: rgba(0, 0, 0, .55) 0 1px 6px;
box-shadow: rgba(0, 0, 0, .55) 0 1px 6px;
text-decoration:none;
}
i am trying to make use of min-width , max-width property but was unable to achieve the results as desired.
here is the code
HTML
<form class="form-wrapper-01">
<input id="search" type="text" />
<input id="submit" type="submit" value="Search" />
</form>
CSS
.form-wrapper-01 {
max-width: 450px;
width:100%;
padding: 10px;
margin: 100px auto;
overflow: hidden;
border-width: 1px;
border-style: solid;
border-color: #dedede #bababa #aaa #bababa;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background-color: #f6f6f6;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eae8e8));
background-image: -webkit-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -moz-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -ms-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -o-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: linear-gradient(top, #f6f6f6, #eae8e8);
}
.form-wrapper-01 #search {
max-width: 330px;
width:100%;
height: 20px;
padding: 10px 5px;
float: left;
font: bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 1px solid #ccc;
-moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.form-wrapper-01 #search:focus {
outline: 0;
border-color: #aaa;
-moz-box-shadow: 0 1px 1px #bbb inset;
-webkit-box-shadow: 0 1px 1px #bbb inset;
box-shadow: 0 1px 1px #bbb inset;
}
.form-wrapper-01 #search::-webkit-input-placeholder {
color: #999;
font-weight: normal;
font-size:12px;
font-style:italic;
}
.form-wrapper-01 #search:-moz-placeholder {
color: #999;
font-weight: normal;
font-size:12px;
font-style:italic;
}
.form-wrapper-01 #search:-ms-input-placeholder {
color: #999;
font-weight: normal;
font-size:12px;
font-style:italic;
}
.form-wrapper-01 #submit {
float: right;
border: 1px solid #00748f;
height: 42px;
max-width: 100px;
width:100%;
padding: 0;
cursor: pointer;
font: bold 15px Arial, Helvetica;
color: #fafafa;
text-transform: none;
background-color: #0483a0;
background-image: -webkit-gradient(linear, left top, left bottom, from(#31b2c3), to(#0483a0));
background-image: -webkit-linear-gradient(top, #31b2c3, #0483a0);
background-image: -moz-linear-gradient(top, #31b2c3, #0483a0);
background-image: -ms-linear-gradient(top, #31b2c3, #0483a0);
background-image: -o-linear-gradient(top, #31b2c3, #0483a0);
background-image: linear-gradient(top, #31b2c3, #0483a0);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
}
.form-wrapper-01 #submit:hover,
.form-wrapper-01 #submit:focus {
background-color: #31b2c3;
background-image: -webkit-gradient(linear, left top, left bottom, from(#0483a0), to(#31b2c3));
background-image: -webkit-linear-gradient(top, #0483a0, #31b2c3);
background-image: -moz-linear-gradient(top, #0483a0, #31b2c3);
background-image: -ms-linear-gradient(top, #0483a0, #31b2c3);
background-image: -o-linear-gradient(top, #0483a0, #31b2c3);
background-image: linear-gradient(top, #0483a0, #31b2c3);
}
.form-wrapper-01 #submit:active {
outline: 0;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}
.form-wrapper-01 #submit::-moz-focus-inner {
border: 0;
}
here is live example
http://jsfiddle.net/6TUem/
as you can see the problem is with search button which shift itself in next line when you resize the window.i want it to stick with the input [text] field
Why not make something like this?
#media screen and (max-width: 520px) {
.form-wrapper-01 #submit {
float: none;
max-width: none;
margin-top: 1em;
}
.form-wrapper-01 #search {
max-width: none;
width: 100%%;
}
}
(Admittedly, I did change some things such as box-sizing.)
You have to wrap the input in a div and then use some style like this:
.form-wrapper-01 {
background-color: #f3f3f3;
width: 100%;
max-width: 450px;
position: relative;
display: block;
text-align: right;
padding: 10px;
}
#search {
background-color: #ff0000;
position: absolute;
left: 10px;
right: 100px;
}
#search input {
width: 100%;
}
#submit {
width: 80px;
}
See this fiddle: http://jsfiddle.net/6TUem/4/