I have created a form and set focus to none but I am still getting the green box to appear and stay around each form field when I am testing.
Here is the form: https://secureforms.nextens.nl/TEMPLATE
I have already tried using:
*:focus {
outline: none;
}
AND
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}
But for some reason, this still isn't working. Below is the CSS that I am using to style the form.
input[type=text], select {
font-size:15px;
width: 85%;
margin: 8px 0;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 25px;
box-sizing: content-box;
}
.elq-form select
{
font-size:15px;
width: 85%;
margin: 8px 0;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 25px;
box-sizing: content-box;
}
.elq-form radio
{
font-size:15px;
width: 100%;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 25px;
box-sizing: content-box;
}
input[type=submit] {
width: 100%;
background-color: #337ab7;
color: white;
margin-top: 8px;
margin-bottom: 8px;
border: none;
border-radius: 0px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #337ab7;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}
I just want the green highlighting around the form fields not to show up.
add this in your css
.LV_invalid_field, input.LV_invalid_field:hover, input.LV_invalid_field:active, textarea.LV_invalid_field:hover, textarea.LV_invalid_field:active,
.LV_valid_field, input.LV_valid_field:hover, input.LV_valid_field:active, textarea.LV_valid_field:hover, textarea.LV_valid_field:active {
outline: 0;
}
You have this CSS in your template, you gotta remove it to get what you want
.LV_valid_field,
input.LV_valid_field:hover,
input.LV_valid_field:active,
textarea.LV_valid_field:hover,
textarea.LV_valid_field:active {
outline: 1px solid #00CC00;
}
.LV_invalid_field,
input.LV_invalid_field:hover,
input.LV_invalid_field:active,
textarea.LV_invalid_field:hover,
textarea.LV_invalid_field:active {
outline: 1px solid #CC0000;
}
According to Dev-Tools, it is line 7 of your CSS that is causing the issue:
.LV_valid_field, ...
Related
I have this piece of CSS code that appears on all other browsers that I have tested including Firefox and Chrome but for some reason, they do not appear in the Safari browser. What am I doing wrong?
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=number], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=button] {
width: 45%;
background-color: #3a5cd7;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=button]:hover {
background-color: #45a049;
}
div {
padding: 70px 0;
text-align: center;
}
It seems that you have to use another version of your code for safari or firefox.
Example for type=number in firefox :
input[type=number] {
}
Example for type=number in safari :
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
}
I find this here:
Numeric Inputs – A Comparison of Browser Defaults
You just have to look for the rest of the inputs
I am designing a FM player using pure CSS (no javascript) and tested the layout in Chrome, Firefox, Internet Explorer (IE), and Edge browsers. Except Internet Explorer, the layout shows 99% accuracy as below.
The layout in IE is shown below,
Is it possible to get 100% layout accuracy in all cross-browsers (others like Opera, Safari, etc.)?
The HTML code is used is below,
<body>
<div id="player">
<audio id="musicPlayer" autoplay="autoplay">
<source src="hls.mp3"/>
</audio>
<span id="playPause" onclick="playPause()"><img src="images/play.png" id="playMusic"/></span>
<span id="time">00:00:00</span>
<span id="volumeIcon"><img src="images/volume.png" id="volume"/></span>
<input type="range" id="changeVolume" oninput="SetVolume(this.value)" onchange="SetVolume(this.value)" step="1" min="0" max="100" value="100"/>
</div>
</body>
and CSS code is below,
body {
width:100%;
margin:0 auto;
padding:0px;
font-family:helvetica;
}
#player {
width:400px;
margin:0 auto;
padding:5px;
box-sizing:border-box;
border-radius: 4px;
border: 1px outset darkgreen;
box-shadow: 5px 0 5px -5px black, -5px 0 5px -5px black;
background-image: linear-gradient(lightgreen, PaleGreen, lightgreen);
}
#time {
float:left;
height:20px;
line-height:20px;
margin-left:2px;
margin-right:5px;
margin-top:3px;
}
#playMusic, #pauseMusic {
float:left;
height:18px;
margin-left:2px;
margin-right:5px;
margin-top:3px;
cursor: default;
border-radius: 3px;
border: 1px solid limegreen;
background-image: linear-gradient(lightgreen, PaleGreen, lightgreen);
outline:none;
}
#playMusic:hover, #pauseMusic:hover {
background:#94d362;
border-radius: 3px;
border: 1px solid ForestGreen;
background-color:lightgreen;
background: hsl(100, 100%, 85%);
}
input[type=range] {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
width: 120px;
height:18px;
line-height:18px;
margin-left:2px;
margin-right:5px;
margin-top:3px;
position: absolute;
background-color: transparent;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 3px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0;
background: #228442;
border-radius: 3px;
border: 0;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 0;
border: 0;
height: 10px;
width: 10px;
border-radius: 10px;
background: darkgreen;
cursor: pointer;
-webkit-appearance: none;
margin-top: -4px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #228442;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 3px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0;
background: #228442;
border-radius: 3px;
border: 0;
}
input[type=range]::-moz-range-thumb {
box-shadow: 0;
border: 0;
height: 10px;
width: 10px;
border-radius: 10px;
background: darkgreen;
cursor: pointer;
-webkit-appearance: none;
margin-top: -4px;
}
input[type=range]::-ms-track {
width: 100%;
height: 3px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
border-width: 3px 0;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #228442;
border: 0;
border-radius: 3px;
box-shadow: 0;
}
input[type=range]::-ms-fill-upper {
background: #228442;
border: 0;
border-radius: 3px;
box-shadow: 0;
}
input[type=range]::-ms-thumb {
box-shadow: 0;
border: 0;
height: 10px;
width: 10px;
border-radius: 10px;
background: darkgreen;
cursor: pointer;
margin: 0;
}
input[type=range]:focus::-ms-fill-lower {
background: #228442;
}
input[type=range]:focus::-ms-fill-upper {
background: #228442;
}
#volume {
margin-left:134px;
width:20px;
}
The live test URL: https://biox.ml/fm
After some research, I finally found out that you should use the flex positioning (supported by IE11).
First, I edited the HTML design to use block elements (and to pack together the volume icon and range input to simplify the CSS styling).
I set a display:flex for div#player to enable flex positioning.
I put a flex-grow:1 to div#time to let it fill the remaining space.
I put to div#volume an align-items:center style to vertical align the range input and an align-content:flex-end to place the volume box to the right of the div#player.
Finally, I set the top and the bottom paddings of the range input to 0 for IE11, and the height to 100% otherwise IE crops the thumb.
Plus, some minor changes for the finishing and code cleaning.
body {
width: 100%;
margin: 0 auto;
padding: 0px;
font-family: helvetica;
}
/* Beginning of the edited part */
#player {
display: flex;
height: 28px;
width: 400px;
align-items: center;
margin: 0 auto;
padding: 0 5px 0 5px;
background-image: linear-gradient(lightgreen, PaleGreen, lightgreen);
border-radius: 4px;
border: 1px outset darkgreen;
box-sizing: border-box;
box-shadow: 5px 0 5px -5px black, -5px 0 5px -5px black;
}
div#playPause,
div#volume {
height: 18px;
}
div#playPause {
margin-right: 5px;
border: 1px solid limegreen;
border-radius: 3px;
outline: none;
}
div#volume {
display: flex;
align-items: center;
align-content: flex-end;
}
div#playPause img,
div#volume img {
height: 100%;
}
div#time {
flex-grow: 1;
}
div#volume input[type=range] {
width: 120px;
height:100%;
margin: 0;
padding: 0 0 0 5px;
/* 0 paddings is important here */
background-color: transparent;
}
div#volume input[type=range]:focus {
outline: none;
}
/* End of the edited part
Below untouched specific-browser styling the "skin" of the range input
"Untouched" except the prefix "div#volume"
*/
div#volume input[type=range] {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
}
div#volume input[type=range]:focus {
outline: none;
}
div#volume input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 3px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0;
background: #228442;
border-radius: 3px;
border: 0;
}
div#volume input[type=range]::-webkit-slider-thumb {
box-shadow: 0;
border: 0;
height: 10px;
width: 10px;
border-radius: 10px;
background: darkgreen;
cursor: pointer;
-webkit-appearance: none;
margin-top: -4px;
}
div#volume input[type=range]:focus::-webkit-slider-runnable-track {
background: #228442;
}
div#volume input[type=range]::-moz-range-track {
width: 100%;
height: 3px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0;
background: #228442;
border-radius: 3px;
border: 0;
}
div#volume input[type=range]::-moz-range-thumb {
box-shadow: 0;
border: 0;
height: 10px;
width: 10px;
border-radius: 10px;
background: darkgreen;
cursor: pointer;
-webkit-appearance: none;
margin-top: -4px;
}
div#volume input[type=range]::-ms-track {
width: 100%;
height: 3px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
border-width: 3px 0;
color: transparent;
}
div#volume input[type=range]::-ms-fill-lower {
background: #228442;
border: 0;
border-radius: 3px;
box-shadow: 0;
}
div#volume input[type=range]::-ms-fill-upper {
background: #228442;
border: 0;
border-radius: 3px;
box-shadow: 0;
}
div#volume input[type=range]::-ms-thumb {
box-shadow: 0;
border: 0;
height: 10px;
width: 10px;
border-radius: 10px;
background: darkgreen;
cursor: pointer;
margin: 0;
}
div#volume input[type=range]:focus::-ms-fill-lower {
background: #228442;
}
div#volume input[type=range]:focus::-ms-fill-upper {
background: #228442;
}
<div id="player">
<audio id="musicPlayer" autoplay="autoplay">
<source src="hls.mp3"/>
</audio>
<div id="playPause" onclick="playPause()">
<img src="https://biox.ml/fm/images/play.png" id="playMusic" />
</div>
<div id="time">00:00:00</div>
<div id="volume">
<img src="https://biox.ml/fm/images/volume.png" id="playMusic" />
<input type="range" id="changeVolume" oninput="SetVolume(this.value)" onchange="SetVolume(this.value)" step="1" min="0" max="100" value="100" />
</div>
</div>
I think that changing the vertical align property in the CSS might help:
#changeVolume{
vertical-align: middle;
}
Update
You could try doing this:
#player{
display: table-cell;
vertical-align: middle;
}
#changeVolume{
display: inline-block;
}
I hope so that would work...
You can find a screenshot of my problem here; While trying to style the range input I noticed that it has white corners. I can't seem to figure out why or how to remove them, I first thought it was an outline but setting outline to none did nothing. Here is a JSFiddle: http://jsfiddle.net/c1y0y7dj/
My CSS
input[type=range] {
-webkit-appearance: none;
width: 200px;
}
input[type=range]::-webkit-slider-runnable-track {
width: 200px;
height: 5px;
background: #565656;
border: none;
border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: #F06A00;
margin-top: -5px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-moz-range-track {
width: 200px;
height: 5px;
background: #ddd;
border: none;
border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: #F06A00;
}
input[type=range]::-ms-track {
width: 200px;
height: 5px;
background: transparent;
border-color: transparent;
border-width: 6px 0;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #373737;
border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
background: #575757;
border-radius: 10px;
}
input[type=range]::-ms-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: #F06A00;
}
input[type=range]:focus::-ms-fill-lower {
background: #373737;
}
input[type=range]:focus::-ms-fill-upper {
background: #575757;
}
Try this css
input[type=range] {
-webkit-appearance: none;
width: 200px;
background-color: transparent;
}
Here is the solution
You should add to
input[type=range] {
-webkit-appearance: none;
width: 200px;
background: transparent;
}
The input tag by default has a white background set by chrome if you just added
background-color :#565656 ;
to your first input selector it should solve your issue
Have used the below code for text editor with bullet listing in it.
<div text-angular="text-angular" ng-model="comments"
style="border: 1px solid #e1e1e1;"
ta-toolbar="[['ul']]" name="htmlcontent1" class="form-control myform1-height"
ta-html-editor-class="form-control myform1-height">
</div>
the issue is the text editor doesn't popup keyboard when touched.
have used below css for it.
.closing-textarea {
width: 100%;
margin-top: 30px;
border: 1px solid #dee5e7;
outline: none;
-webkit-appearance: none;
resize: none;
padding: 10px;
}
.closing-comments-wrapper .form-control {
border: none;
border-top: 1px solid #e1e1e1;
/*padding: 10px;*/
/*border: 2px dashed #DDD;*/
}
.closing-comments-wrapper .ta-editor.form-control.myform1-height, .ta-scroll-window.form-control.myform1-height {
min-height: 150px;
height: auto;
overflow: auto;
font-family: inherit;
font-size: 100%;
}
.closing-comments-wrapper .form-control.myform1-height > .ta-bind {
height: auto;
min-height: 150px;
padding: 6px 12px;
}
.closing-comments-wrapper .btn-group>.btn:first-child {
background: rgb(255, 255, 255);
float: right;
}
.closing-comments-wrapper .btn-group {
float: right;
}
.ta-hidden-input {
display: none;
}
I wonder if i can put a submit button inside a search input, in the right side. I tried using float: right however doesn't work.
Codepen: http://codepen.io/celicoo/pen/XbKYyY
HTML:
<section class="search">
<div class="search__container">
<div class="search__row">
<div class="col-lg-12">
<div class="search__box">
<h2 class="search__title">Procurando por: Nome de ...</h2>
<form class="search__form" action="#" method="get">
<input class="search__input" type="text" placeholder="Busque um Crawler.." />
<button class="search__submit" type="submit">Procurar</button>
</form>
</div>
</div>
</div>
</div>
</section>
CSS:
.search {
color: #676a6c;
margin-top: 25px;
&__row {
margin-left: -15px;
margin-right: -15px;
overflow: hidden;
}
&__box {
background: #FFFFFF;
padding: 10px;
}
&__form {
margin-top: 10px;
}
&__input {
background-color: #FFFFFF;
background-image: none;
border: 1px solid #e5e6e7;
border-radius: 1px;
color: inherit;
display: block;
padding: 12px;
width: 100%;
font-size: 14px;
outline: none;
}
&__input:focus {
border: 1px solid #E97228;
}
&__submit {
background-color: #E97228;
border-color: #E97228;
color: #FFFFFF;
border: 1px solid transparent;
outline: none;
}
}
I was trying to use float right like i said, but isn't work, the float will only push the submit button to the right, but not inside the input.
Your input for .search__input has a width of 100% so nothing can actually go beside it.
You need to make the width less than 100% and add float:left;
Example:
.search__input{width:50%; float:left;}
I assume you are trying to have the submit button 'inside' the input... or overlapping it.
You need to create a wrapping div around the input and submit with position: relative;, and then give the submit button a position: absolute; and a top and right value.
I added display: inline & have placed your search bar inside a container.
Try this css:
.search {
color: #676a6c;
margin-top: 25px;
&__row {
margin-left: -15px;
margin-right: -15px;
overflow: hidden;
}
&__box {
background: #FFFFFF;
padding: 10px;
}
&__form {
margin-top: 10px;
}
&__input {
background-color: #FFFFFF;
background-image: none;
border: 1px solid #e5e6e7;
border-radius: 1px;
color: inherit;
display: block;
padding: 12px;
width: 50%;
font-size: 14px;
outline: none;
display: inline;
margin:0px;
}
&__input:focus {
border: 1px solid #E97228;
}
&__submit {
background-color: #E97228;
border-color: #E97228;
color: #FFFFFF;
border: 1px solid transparent;
outline: none;
padding: 12px;
margin:0px;
}
&__container {
width: 250px;
}
}