I have this site:
http://test2.dac-proiect.ro/wp/?page_id=6
I want to remove the arrows in the picture below.
http://i61.tinypic.com/rhvgxh.png
You must add the product to cart to see those arrows
Code HTML:
<div class="cart-number">
<span></span>
<div class="quantity buttons_added"><input type="button" value="-" class="minus"><input type="number" step="1" name="cart[d3d9446802a44259755d38e6d163e820][qty]" value="1" title="Quantity" class="input-text qty text" size="4"><input type="button" value="+" class="plus"></div>
</div>
Code CSS:
.quantity {
width: auto;
position: relative;
margin: 0 auto;
overflow: hidden;
zoom: 1;
}
.quantity input.qty {
float: left;
width: 45px;
height: 38px;
text-align: center;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
padding: 0;
font-weight: bold;
-moz-appearance: textfield;
}
.quantity input.qty:focus:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.quantity .plus, .quantity .minus {
background: #fff;
float: left;
display: block;
padding: 0;
margin: 0;
vertical-align: text-top;
text-decoration: none;
overflow: visible;
text-decoration: none;
cursor: pointer;
line-height: 13px;
font-size: 12px;
color: #666666;
border: 1px solid #e5e5e5;
text-align: center;
width: 45px;
height: 38px;
}
.quantity .plus {
border-left: none;
top: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
right: 0;
}
.quantity .minus {
border-right: none;
bottom: 0;
right: 0;
border-top-right-radius: 0;
border-top-left-radius: 0;
}
How can I solve this problem?
I can not figure out where they come from those arrows
Thanks in advance!
It all depends on the input type, you want to use this bit of CSS to hide it.
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;}
input[type="number"] {
-moz-appearance: textfield;}
Cheers
Related
I ma trying to style input range and progress. The issue is they are not aligned on top of each other. I dont want to use margin-top on -webkit-slider-runnable-track because I found it doesnt work in some cases (depending on where parent element is positioned).
:root {
--value: 30%;
}
.seekbar-wrap{
background: #353b49;
}
.seekbar {
overflow: hidden;
height: 50px;
cursor: pointer;
flex: 1;
}
.seekbar-wrap {
position: relative;
margin: 0 10px;
height: 50px;
}
.load-level {
position: absolute;
top: 23px;
width: 100%;
-webkit-appearance: none;
appearance: none;
background: 0 0;
border: 0;
height: 5px;
left: 0;
padding: 0;
}
.load-level::-webkit-progress-bar{
background:none;
}
.load-level::-webkit-progress-value{
background-color:#b6bfc1;
}
.load-level::-moz-progress-bar{
background-color:#b6bfc1;
}
.input-progress {
position: absolute;
width: 100%;
left: 0;
top: 0;
height: 50px;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
background: 0 0;
border: 0;
color: #62768f;
margin: 0;
min-width: 0;
padding: 0;
}
.input-progress::-webkit-slider-runnable-track {
background-image:linear-gradient(to right,currentColor var(--value,0),transparent var(--value,0));
border: 0;
height: 5px;
-webkit-user-select: none;
user-select: none;
}
.input-progress::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
border: 0;
width: 0;
height: 0;
}
.input-progress::-moz-range-track {
height: 5px;
border: 0;
background-image:linear-gradient(to right,currentColor var(--value,0),transparent var(--value,0));
}
.input-progress::-moz-range-progress {
}
.input-progress::-moz-range-thumb {
appearance: none;
background: #fff;
border: 0;
height: 0;
width: 0;
}
<div class="seekbar-wrap">
<progress class="load-level" min="0" max="100" role="progressbar" value="44.11733725" aria-hidden="true">% buffered</progress>
<input class="input-progress" type="range" min="0" max="100" step="0.01" autocomplete="off" role="slider" aria-label="Seek" aria-valuemin="0" aria-valuemax="235" aria-valuenow="17.052851513822205" value="0" aria-valuetext="00:01 of 00:20" style="user-select: none; touch-action: manipulation;">
</div>
I don't know if I fully understood what you mean, but maybe this CSS code could help:
:root {
--value: 30%;
}
.seekbar-wrap{
background: #353b49;
}
.seekbar {
overflow: hidden;
height: 50px;
cursor: pointer;
flex: 1;
}
.seekbar-wrap {
position: relative;
margin: 0 10px;
height: 50px;
display:flex;
}
.load-level {
/* position: absolute; */
top: 23px;
width: 100%;
-webkit-appearance: none;
appearance: none;
background: 0 0;
border: 0;
height: 5px;
left: 0;
padding: 0;
}
.load-level::-webkit-progress-bar{
background:none;
}
.load-level::-webkit-progress-value{
background-color:#b6bfc1;
}
.load-level::-moz-progress-bar{
background-color:#b6bfc1;
}
.input-progress {
position: absolute;
width: 100%;
left: 0;
top: 0;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
background: 0 0;
border: 0;
color: #62768f;
margin: 0;
min-width: 0;
padding: 0;
}
.input-progress::-webkit-slider-runnable-track {
background-image:linear-gradient(to right,currentColor var(--value,0),transparent var(--value,0));
border: 0;
height: 5px;
-webkit-user-select: none;
user-select: none;
}
.input-progress::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
border: 0;
width: 0;
height: 0;
}
.input-progress::-moz-range-track {
height: 5px;
border: 0;
background-image:linear-gradient(to right,currentColor var(--value,0),transparent var(--value,0));
}
.input-progress::-moz-range-progress {
}
.input-progress::-moz-range-thumb {
appearance: none;
background: #fff;
border: 0;
height: 0;
width: 0;
}
Hi I have created the following search bar:
<div class="container-fluid">
<div class="search-bar">
<form class="searchBar">
<div class="row" >
<div class="allElements">
<div class="input-group" >
<span style="color:black" class="input-group-addon">
<select id="selection" onchange="getValues(this.value)">
<option>Choose Category</option>
<option>All</option>
<option>Notary</option>
<option>Deed Date</option>
<option>Person</option>
<option>Place</option>
<option>Register Reference</option>
<option>Subject</option>
</select>
</span>
<div class="autocomplete" style ="width:400px">
<input id="search" type="text" class="form-control" name="search" placeholder="Choose a category" style ="width:400px" disabled=true>
</div>
<span class="input-group-addon" style="color:black"> <button type="button" onclick="doSparql(this.value)">Search</button></span>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
Where on firefox is rendered perfectly while on the chrome, the search button is on the other side of the screen not grouped with the rest of the search bar as shown in the picture below. Any idea why this is happening and how I can solve it pls?
The css is:
-moz-webkit-margin:0px
html, body {
max-width: 100%;
overflow-x: hidden;
}
.footer-div {
display: inline;
height: 100%;
}
.panel-footer
{
position: fixed;
bottom: 0;
width: 100%;
padding: 0px 0px;
background-color: rgba(70,131,172,1);
height: 10%;
max-height: 50px;
border-color: #fff;
border-top: 0px solid #ddd;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
z-index: 100;
}
.container-midvalign
{
height:100%;
padding: 0 0;
vertical-align: middle;
display: inline-table;
text-align: left;
}
.contents-midvalign
{
font-weight: bold;
color: #FFFFFF;
font-size: 14px;
vertical-align:middle;
display: table-cell;
text-align: left;
position: relative
}
.contents-midvalign:hover
{
color: #fff;
text-decoration: underline;
}
.footer-img {
background: url(../media/icons/MALTA_COAT_OF_ARMS_WHITE.png) no-repeat;
height: 100%;
max-height: 50px;
background-size: contain;
position: relative;
padding: 0px 0px;
margin-left: 25px;
margin-right: 10px;
margin-top: 0px;
margin-bottom: 0px;
vertical-align: middle;
background-color: transparent;
border: 0px solid transparent;
border-radius: 0px;
}
.footer-div
{
display: inline;
height: 100%;
}
.footer-icon
{
font-size: 24px;
padding-right: 25px;
}
.footer-icon:hover
{
text-decoration: none;
}
.bg-gemma
{
background-color: rgba(70,131,172,1) !important;
}
.bg-transparent
{
background-color: transparent !important;
border-color: transparent !important;
box-shadow: 0 0 0 0 rgba(108,117,125,0) !important;
}
.navbar
{
/* height: 10%;*/
min-height: 50px;
/* overflow: hidden;*/
margin: 0 auto;
padding: 0px;
position: fixed;
border: 0px solid transparent;
width: 100%;
background-color: rgba(70,131,172,1);
}
.fixed-top {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
}
h2{
font-weight: bold;
color: black;
font-size: 40px;
position: relative;
}
#headerdiv {
margin-top: 10px;
margin-bottom: 10px;
}
#fullpagecont
{
padding-left: 25px;
padding-right: 25px;
}
#pheader
{
text-align: center;
}
html body .container-fluid.body-content {
position: absolute;
top: 50px;
bottom: 50px;
right: 0;
left: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
select {
background: transparent;
border: none;
padding: 6px 12px;
}
.input-group-addon {
padding: 0!important;
}
#results{
margin-left: 120px;
margin-right: 120px;
position: relative;
}
.add_data{
margin-left: 150px;
width:20%;
margin-top:5px;
text-align:center;
}
.search-bar{
position: absolute;
left: 35%;
top:130px;
}
.autocomplete {
/*the container must be positioned relative:*/
position: relative;
}
.autocomplete-items {
position: absolute;
text-align: left;
border: 1px solid #d4d4d4;
border-bottom: none;
border-top: none;
z-index: 99;
/*position the autocomplete items to be the same width as the container:*/
top: 100%;
left: 0;
right: 0;
}
button {
padding: 6px 12px;
background: transparent;
border: none;
}
.autocomplete-items div {
padding:10px;
cursor: pointer;
background-color: #fff;
border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
/*when hovering an item:*/
background-color: #e9e9e9;
}
.autocomplete-active {
/*when navigating through the items using the arrow keys:*/
background-color: DodgerBlue !important;
color: #ffffff;
}
#div_pagination{
width:100%;
margin-top:5px;
text-align:center;
}
#div_pagination_all{
width:100%;
margin-top:5px;
text-align:center;
}
#pageNo{
text-align:center;
margin-top: 20px;
}
#main-container{
margin-top: 200px;
width:90%;
margin-left: 75px;
}
#details{
margin-top: 25px;
margin-left: 25px;
}
.deedList{
margin-left: 15px;
}
#media (max-width: 575px)
{
.footer-icon
{
padding-right: 10px;
}
.footer-img
{
margin-left: 10px;
}
}
I saw this in chrome:
and this in FF:
To get on the line I added this:
.autocomplete {
position: relative;
display: inline-block;
}
I've used some html/scss to build a dropdown/select menu (I need to have full control of how the dropdown menu looks like).
The problem is that:
IE 11 opens the dropdown only when I click the down arrow instead the
whole text
in Safari 10.1.1 the dropdown doesn't hide after
clicking the menu "button" entry
Any help would be quite welcome (answering why it behaves like that would be awesome)
.onclick-menu {
position: relative;
display: inline-block;
padding: 0px;
margin: 0px 0px 1em 0px;
outline-width: 0px;
}
.onclick-menu:focus {
pointer-events: none;
}
.onclick-menu::before {
padding: 5px 10px 5px 10px;
background-color: black;
}
.onclick-menu__date-box {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 42px;
padding: 5px 10px 0px 10px;
border: 1px solid #d2d6d9;
position: relative;
min-width: 160px;
background-color: white;
border-radius: 5px;
}
.onclick-menu__date-box::after {
content: "";
transform: none;
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4IiB3aWR0aD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE0LjgzIDE2LjQybDkuMTcgOS4xNyA5LjE3LTkuMTcgMi44MyAyLjgzLTEyIDEyLTEyLTEyeiIvPjxwYXRoIGQ9Ik0wLS43NWg0OHY0OGgtNDh6IiBmaWxsPSJub25lIi8+PC9zdmc+");
background-size: cover;
display: inline-block;
position: relative;
right: -90%;
bottom: 33%;
z-index: 100;
min-width: 15px;
width: 15px;
max-width: 15px;
min-height: 11px;
height: 11px;
max-height: 11px;
}
.onclick-menu__label {
font-size: 14px;
line-height: 14px;
margin-bottom: 3px;
}
.onclick-menu-header {
color: #073590;
font-weight: bold;
}
.onclick-menu:focus .onclick-menu-content {
opacity: 1;
visibility: visible;
border: 1px solid #e5e7e8;
border-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.12) 8px 8px 6px 0px;
width: -webkit-fill-available;
}
.onclick-menu-content {
pointer-events: auto;
position: absolute;
top: 38px;
left: -1px;
z-index: 1;
opacity: 0;
visibility: hidden;
transition-duration: 0.5s;
transition-property: visibility;
background-color: black;
width: auto;
border: 5px solid 1px black;
margin-top: 19px;
margin-left: 0px;
padding: 5px 15px 5px 5px;
}
.onclick-menu-content::after {
top: -9px;
border: 10px solid white;
}
.onclick-menu-content::before {
top: -10px;
border-bottom-width: 10px solid #e5e7e8;
}
.onclick-menu__date-selector {
border-style: none;
width: 100%;
z-index: 1000;
min-height: 16px;
-webkit-appearance: none;
background-color: white;
color: #073590;
font-size: 16px;
font-weight: bold;
outline-style: none;
}
.onclick-menu-content li {
list-style-type: none;
white-space: nowrap;
background-color: transparent;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
outline-width: 0px;
cursor: pointer;
padding: 5px 0px 5px 8px;
}
.onclick-menu-content li:hover {
background-color: #e8f4fd;
border-radius: 2px;
border-color: white;
}
button,
input,
select,
textarea {
font-family: inherit;
font-size: 100%;
margin: 0px;
}
button,
input {
line-height: normal;
}
button,
select {
text-transform: none;
}
button,
html input[type="button"] {
-webkit-appearance: button;
cursor: pointer;
}
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
.onclick-menu-content button {
letter-spacing: 0.03em;
font-weight: bold;
display: block;
width: 100%;
background-color: transparent;
border-style: none;
color: inherit;
cursor: pointer;
outline-width: 0px;
text-align: left;
}
<div tabindex="0" class="onclick-menu__date-box onclick-menu">
<label for="date-select" class="onclick-menu__label">
Take your pick
</label>
<span class="onclick-menu-header">
foo1
</span>
<ul id="date-select" class="onclick-menu-content onclick-menu__date-selector">
<li value="foo1">
<button value="foo1">
foo1
</button>
</li>
<li value="foo2">
<button value="foo2">
foo2
</button>
</li>
<li value="foo3">
<button value="foo3">
foo3
</button>
</li>
</ul>
</div>
I have been having a problem with a little project I have been working on. I have a header and a footer and middle content. I want to have the middle content have a scrolling feature but I cannot set a definitive height. Is there a way to get around the required height for scroll to work?
#Bar, #sea {
-webkit-appearance: none;
-webkit-border-radius: 0;
}
#header {
font-size: 50px;
font-weight: bold;
text-align: center;
padding-top: 25px;
}
#form {
text-align: center;
}
#Bar {
height: 35px;
width: 400px;
font-size: 15px;
box-sizing: border-box;
border-style: solid;
vertical-align: top;
border-width: 1px;
border-color: #c7c7cd;
}
#Bar:focus {
outline: none;
border-style: solid;
border-width: 1px;
border-color: #3A89D8;
}
#sea:active {
outline: none;
border-width: 1px;
border-style: solid;
border-color: #3A89D8;
background-color: #1172d2;
}
#sea:focus {
outline: none;
border-style: solid;
border-width: 1px;
border-color: #3A89D8;
}
#sea {
background-color: #4199F0;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
height: 35px;
color: #ffffff;
font-weight: bold;
font-family: Arial;
border-style: solid;
border-width: 1px;
font-size: 15px;
text-decoration: none;
border-color: #3A89D8;
box-sizing: border-box;
vertical-align: top;
}
body {
margin: 0 auto;
font-family: Arial;
}
#hid {
visibility: hidden;
}
#NoteHolder {
padding-left: 125px;
padding-right: 125px;
overflow: auto;
}
#BarHold {
padding-top: 10px;
}
#SearchOP {
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 120%;
background-color: rgba(0,0,0,0.5);
display: none;
}
#NavSave {
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 120%;
background-color: rgba(0,0,0,0.5);
display: none;
}
#popupBoxOnePosition {
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 120%;
background-color: rgba(0,0,0,0.5);
display: none;
}
.popupBoxWrapper {
width: 550px;
margin: 50px auto;
text-align: left;
}
.popupBoxContent {
background-color: #FFF;
padding: 15px;
overflow: hidden;
}
#popup-Sub {
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
height: 45px;
background-color: #3232ff;
border-style: solid;
border-width: 1px;
font-family: Arial;
font-size: 15px;
float: right;
color: #FFFFFF;
border-color: #1919ff;
text-align: center;
width: 80px;
font-weight: bold;
}
.HeaderNote {
color: #7E7E7E;
font-family: Arial;
font-size: 12px;
}
#Col {
font-weight: bold;
}
table {
border: 1px solid #e0e0e0;
border-collapse: collapse;
margin: auto;
}
th, td {
border: 1px solid #e0e0e0;
border-collapse: collapse;
}
td {
padding: 5px;
text-align: left;
}
th {
background-color: #e6e6e6;
}
#Oper {
float: right;
padding-right: 15px;
cursor: default;
}
a:hover {
text-decoration: underline;
font-weight: bold;
}
#NoteAv {
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 120%;
background-color: rgba(0,0,0,0.5);
display: none;
}
#Settings {
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 120%;
background-color: rgba(0,0,0,0.5);
display: none;
}
#FirstVisit {
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 120%;
background-color: rgba(0,0,0,0.5);
display: none;
}
#MarkList {
vertical-align: middle;
position: fixed;
display: inline;
left: 0;
bottom: 0;
height: 56px;
width: 100%;
border-top-style: solid;
border-width: 1px;
border-color: #3A89D8;
background-color: #eff5f9;
overflow-x: hidden;
}
#MarkList > button {
height: 36px;
color: #39739d;
font-size: 18px;
text-align: center;
white-space: nowrap;
background: #E1ECF4;
border: 1px solid;
display: inline;
margin: 10px 10px 10px;
border-radius: 1px;
border-style: solid;
border-color: #39739d;
}
.YelColBox {
background-color: #F0F041;
}
.LastCol {
background-color: #F0F041;
}
.GreColBox {
background-color: #62ff62;
}
.BluColBox {
background-color: #4199F0;
}
.PurColBox {
background-color: #9941F0;
}
.RedColBox {
background-color: #F04141;
}
.OraColBox {
background-color: #F09941;
}
.ColorBox {
float: right;
width: 12px;
height: 12px;
margin: 5px 5px 5px 5px;
border-width: 1px;
border-style: solid;
border-color: rgba(0,0,0,.2);
}
<body onload="FirstVisit('Settings');">
<div style="height: 30%;">
<div>
<a id="Oper" onClick="toggle_visibility('NoteAv');">Notes</a><a id="Oper" onClick="toggle_visibility('Settings');">Settings</a>
<p id="header">Note Searcher</p>
</div>
<hr>
<p id="form">
<input onClick="this.setSelectionRange(0, this.value.length)" class="SearchInp" autocomplete="off" id="Bar" name="Input" type="text" placeholder="Removed JS for the fiddle.">
<input class="SearchInp" type="submit" id="sea" onClick="SetOff ()" value="Search">
<br>
<input id="Highlight" type="radio" name="textOp" checked>Highlight
<input id="Filter" type="radio" name="textOp">Filter
</p>
</div>
<div id="NoteHolder">
<p class="NoteOp">
Imagine if this filled up the whole text area.
</p>
</div>
<div id=Hid>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="note.js"></script>
<footer id="MarkList">
</footer>
</body>
Setting the overflow property to scroll will show scrollbars (albeit disabled).
#Bar, #sea {
-webkit-appearance: none;
-webkit-border-radius: 0;
}
#header {
font-size: 50px;
font-weight: bold;
text-align: center;
padding-top: 25px;
}
#form {
text-align: center;
}
#Bar {
height: 35px;
width: 400px;
font-size: 15px;
box-sizing: border-box;
border-style: solid;
vertical-align: top;
border-width: 1px;
border-color: #c7c7cd;
}
#Bar:focus {
outline: none;
border-style: solid;
border-width: 1px;
border-color: #3A89D8;
}
#sea:active {
outline: none;
border-width: 1px;
border-style: solid;
border-color: #3A89D8;
background-color: #1172d2;
}
#sea:focus {
outline: none;
border-style: solid;
border-width: 1px;
border-color: #3A89D8;
}
#sea {
background-color: #4199F0;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
height: 35px;
color: #ffffff;
font-weight: bold;
font-family: Arial;
border-style: solid;
border-width: 1px;
font-size: 15px;
text-decoration: none;
border-color: #3A89D8;
box-sizing: border-box;
vertical-align: top;
}
body {
margin: 0 auto;
font-family: Arial;
}
#hid {
visibility: hidden;
}
#NoteHolder {
padding-left: 125px;
padding-right: 125px;
overflow: scroll;
}
#BarHold {
padding-top: 10px;
}
#SearchOP {
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 120%;
background-color: rgba(0,0,0,0.5);
display: none;
}
#NavSave {
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 120%;
background-color: rgba(0,0,0,0.5);
display: none;
}
#popupBoxOnePosition {
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 120%;
background-color: rgba(0,0,0,0.5);
display: none;
}
.popupBoxWrapper {
width: 550px;
margin: 50px auto;
text-align: left;
}
.popupBoxContent {
background-color: #FFF;
padding: 15px;
overflow: hidden;
}
#popup-Sub {
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
height: 45px;
background-color: #3232ff;
border-style: solid;
border-width: 1px;
font-family: Arial;
font-size: 15px;
float: right;
color: #FFFFFF;
border-color: #1919ff;
text-align: center;
width: 80px;
font-weight: bold;
}
.HeaderNote {
color: #7E7E7E;
font-family: Arial;
font-size: 12px;
}
#Col {
font-weight: bold;
}
table {
border: 1px solid #e0e0e0;
border-collapse: collapse;
margin: auto;
}
th, td {
border: 1px solid #e0e0e0;
border-collapse: collapse;
}
td {
padding: 5px;
text-align: left;
}
th {
background-color: #e6e6e6;
}
#Oper {
float: right;
padding-right: 15px;
cursor: default;
}
a:hover {
text-decoration: underline;
font-weight: bold;
}
#NoteAv {
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 120%;
background-color: rgba(0,0,0,0.5);
display: none;
}
#Settings {
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 120%;
background-color: rgba(0,0,0,0.5);
display: none;
}
#FirstVisit {
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 120%;
background-color: rgba(0,0,0,0.5);
display: none;
}
#MarkList {
vertical-align: middle;
position: fixed;
display: inline;
left: 0;
bottom: 0;
height: 56px;
width: 100%;
border-top-style: solid;
border-width: 1px;
border-color: #3A89D8;
background-color: #eff5f9;
overflow-x: hidden;
}
#MarkList > button {
height: 36px;
color: #39739d;
font-size: 18px;
text-align: center;
white-space: nowrap;
background: #E1ECF4;
border: 1px solid;
display: inline;
margin: 10px 10px 10px;
border-radius: 1px;
border-style: solid;
border-color: #39739d;
}
.YelColBox {
background-color: #F0F041;
}
.LastCol {
background-color: #F0F041;
}
.GreColBox {
background-color: #62ff62;
}
.BluColBox {
background-color: #4199F0;
}
.PurColBox {
background-color: #9941F0;
}
.RedColBox {
background-color: #F04141;
}
.OraColBox {
background-color: #F09941;
}
.ColorBox {
float: right;
width: 12px;
height: 12px;
margin: 5px 5px 5px 5px;
border-width: 1px;
border-style: solid;
border-color: rgba(0,0,0,.2);
}
<body onload="FirstVisit('Settings');">
<div style="height: 30%;">
<div>
<a id="Oper" onClick="toggle_visibility('NoteAv');">Notes</a><a id="Oper" onClick="toggle_visibility('Settings');">Settings</a>
<p id="header">Note Searcher</p>
</div>
<hr>
<p id="form">
<input onClick="this.setSelectionRange(0, this.value.length)" class="SearchInp" autocomplete="off" id="Bar" name="Input" type="text" placeholder="Removed JS for the fiddle.">
<input class="SearchInp" type="submit" id="sea" onClick="SetOff ()" value="Search">
<br>
<input id="Highlight" type="radio" name="textOp" checked>Highlight
<input id="Filter" type="radio" name="textOp">Filter
</p>
</div>
<div id="NoteHolder">
<p class="NoteOp">
Imagine if this filled up the whole text area.
</p>
</div>
<div id=Hid>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="note.js"></script>
<footer id="MarkList">
</footer>
</body>
A screenshot of the scrollbars:
EDIT: You can see the search box live here.
Before I explain, let me show you the code I am using:
HTML
<div class="SiteSearch">
<form action="/search" id="searchform" method="get">
<input x-webkit-speech="" autocomplete="off" type="text" id="gText" name="q" id="q" onblur="if (this.value == '') {this.value = 'Search';}" onfocus="if (this.value == 'Search') {this.value = '';}" value ='' "search" placeholder="Search.."/>
<input type="submit" id="gBtn"/>
</form>
</div>
CSS
#Head .SiteSearch {
top: 12px;
right: 0;
}
#Head .SiteSearch {
float: right;
position: relative;
}
input#gText {
float: left;
width: 225px;
height: 23px;
line-height: 24px;
text-indent: 5px;
font-family: arial,sans-serif;
font-size: 1em;
color: #333;
background: white;
border: solid 1px #D9D9D9;
border-top: solid 1px silver;
border-right: none;
vertical-align: middle;
-webkit-appearance: none;
-webkit-border-radius: 0px;
}
#searchform #gBtn {
background-image: url('search.png');
width: 31px;
height: 27px;
}
#gBtn {
vertical-align: middle;
cursor: pointer;
width: 40px;
height: 31px;
line-height: 100%;
padding: 0;
font-size: 0;
text-indent: -999px;
color: transparent;
background-position: 0 0;
border: none;
-webkit-appearance: none;
-webkit-border-radius: 0px;
}
input#gBtn:hover {
background-position: 31px 0;
border: none;
}
This is how the search box looks on IE7 vs. IE8/IE9:
vs.
As you can see above, the input button image isn't being shown in IE7. How can I fix this?
Any help is appreciated. Thanks!
I fixed it by modifying the CSS code like so:
#Head .SiteSearch {
top: 12px;
right: 0;
}
#Head .SiteSearch {
float: right;
position: relative;
}
input#gText {
float: left;
width: 225px;
height: 23px;
line-height: 24px;
text-indent: 5px;
font-family: arial,sans-serif;
font-size: 1em;
color: #333;
background: white;
border: solid 1px #D9D9D9;
border-top: solid 1px silver;
border-right: none;
vertical-align: middle;
-webkit-appearance: none;
-webkit-border-radius: 0px;
}
/* REMOVED THIS PIECE
#searchform #gBtn {
background-image: url('search.png');
width: 31px;
height: 27px;
}*/
#gBtn {
vertical-align: middle;
cursor: pointer;
width: 40px;
height: 31px;
line-height: 100%;
padding: 0;
font-size: 0;
text-indent: -999px;
color: transparent;
background-image: url('search.png'); /* ADDED */
background-position: 0 0;
border: none;
-webkit-appearance: none;
-webkit-border-radius: 0px;
}
input#gBtn:hover {
background-image: url('search.png'); /* ADDED - BUT OPTIONAL */
background-position: 31px 0;
border: none;
}
Write background instead of background-image in your #gBtn button. May be that's work