I am new to html/css, I have a textbox while writing an underline comes below the words.once the focus goes off then goes automatically.I want to remove that underline while typing.
I have used text-decoration: none;
and spellcheck="false"
but its not working.
my snippet
<input type="text" spellcheck="false" class="text-line" id="username" name="username" placeholder="Username">
I am also attaching the image.
css
.text-line {
background-color: transparent;
width: 15%;
color: #000000;
outline: none;
outline-style: none;
border-top: none;
border-left: none;
border-right: none;
border-bottom: solid #eeeeee 1px;
text-decoration: none;
padding: 3px 5px;
}
There are several cases:
That class text-line could have declared a selector :focus that puts an underline to your text
The input text could have binded a javascript event that puts an underline to your text when the input is in focus, and remove it when it is not
It worked adding autocomplete="off" autocorrect="off"
in html.
Thanks everyone.
Related
Input checkbox outline in Chrome behaves itself really odd.
Generally, outline doesn't include margins, but when you set the focus on it with the keyboard (! not the mouse), it starts including margins. For the tag types other than input (as well, as for the other input type) everything works fine (outline never includes margins). In Firefox everything works fine as well.
Here is the JsFiddle to test this:
.error input {
outline: 2px solid #c00;
margin: 2px;
}
.error input[type=checkbox] {
outline: 2px solid #c00;
}
<div class="error">
<input type='checkbox'><label>Some label</label>
<input type='text'>
</div>
http://jsfiddle.net/71ybetjv/
Is this a Chrome bug? And is there any workaround for that?
Chromes default :focus-visible style contains outline-offset: 2px;.
This can be overwritten: (Though it's worth noting that you should replace it with another clear "focused" style for accessibility)
.error input {
outline: 2px solid #c00;
margin: 2px;
}
.error input:focus-visible {
outline-offset: 0;
}
.error input[type=checkbox] {
outline: 2px solid #c00;
}
<div class="error">
<input type='checkbox'><label>Some label</label><br />
<input type='text' />
</div>
I use custom radio buttons which I need to verify via HTML5 form verification. Each option has the required attribute. The CSS :invalid selector should then color the border of the span covering the button in red as soon as the user clicks the form submit button. Unfortunately, the border gets colored on-load of the page, submit button hasn't been even clicked. Any ideas?
input[type="radio"] {
opacity: 0;
position: absolute;
z-index: -1;
}
label input[type="radio"]:checked+.form-btn-radio {
background-color: blue;
text-decoration: none;
color: white;
border: 2px solid blue;
}
label input[type="radio"]:invalid+.form-btn-radio {
border: 2px solid red;
}
.form-btn-radio {
border: 2px solid black;
color: black;
padding: 10px 25px 10px 25px;
min-width: 60px;
background-color: white;
text-decoration: none;
text-align: center;
display: inline-block;
cursor: pointer;
}
<label for="apply">
<input type="radio" id="apply" name="apply" value="easy" required>
<div class="form-btn-radio">Option 1 Name</div>
</label>
<label for="apply-external">
<input type="radio" id="apply" name="apply" value="url" required>
<div class="form-btn-radio">Option 2 Name</div>
</label>
found the issue: "If any one of the radio buttons in a group is required, the :invalid pseudo-class is applied to all of them if none of the buttons in the group is selected. (Grouped radio buttons share the same value for their name attribute.)"
developer.mozilla.org/en-US/docs/Web/CSS/:invalid
So JS is the only solution if you don't want to have one of the radios pre-selected.
On my website people somehow cannot write in the inputs when they use Safari. The problem is only present in safari.
(http://www.rootshybrid.dk/blivfrivillig/)
From other threads I've seen the solution being the user-select code. I have tried adding both webkit-user-select: auto; and webkit-user-select: text; to the css of the input fields, but it still doesn't work.
Anyone have a solution to my problem?
The combination input padding on line 40 of main.css
input, select, textarea {
border-radius: 6px;
border: 1px solid #d0d0d0;
outline: 0;
font-family: Roboto;
padding: 15px 10px; /*<<<<<<<*/
font-size: 15px;
webkit-user-select: auto;
}
Is not working with the height on line 55 and 80 of main.css
.whitebox input[type="text"] {
height: 20px;
}
Just add a hollow class to the <p> value
for example
<p class="abc">
<label class="stdlabel">Fornavn *</label>
<input type="text" name="firstname" value="">
</p>
Because it seems that the problem occurs for those input labels only
I'm running into an issue where the default blue outline when input fields are focused is not being removed despite trying two CSS techniques to remove the outline. I have tried to use input:focus and input[type="text"]:focus, but neither are removing this outline. What am I possibly doing wrong with my CSS?
Here is my form with the comment-box input:
<div class="comment-form">
<form action="/app/blog/{{this.blogId}}/comment" method="post">
<label for="data-comment">Comment:</label>
<br />
<input type="text" name="comment" class="comment-box">
<button type="submit" class="comment-submit">Comment</button>
</form>
</div>
Here is the CSS (input.comment-box CSS is working):
input.comment-box {
width: 80%;
box-sizing: border-box;
border: 2px solid #D8D8D8;
border-radius: 4px;
}
.comment-box input:focus {
border: 2px solid #D8D8D8;
outline: none !important;
}
.comment-box input:focus means an input box inside the .comment-box class, i.e.,
<div class="comment-box">
<input type="text">
</div>
What you probably want is:
input.comment-box:focus {
outline: none;
}
or just
.comment-box:focus {
outline: none;
}
The problem is with the selector .comment-box input:focus. That will target input:focus inside of .comment-box, which doesn't exist.
The selector either needs to be .comment-box:focus or input:focus or .comment-form input:focus
For this case, input should always come first > class/id > pseudo-class.
input.comment-box:focus {
outline: none;
}
Otherwise
.comment-form input:focus {
outline: none;
}
I can't tell you why it's not working in this case, but I will suggest that you think carefully and read http://www.outlinenone.com/ before you actually remove the outline. It exists so that someone who is not using a mouse can navigate among form inputs and determine which one has focus. It appears that your styles will remove ANY distinction between the focused and unfocused input box. Essentially, this means you are excluding numerous people with disabilities from using your website.
how to remove blinking cursor after insert a word in the text box. I am using css making the cursor color transparent , but it is not working as expected. is there a way to solve this using java script?
Try this:
Live demo on jsfiddle
CSS:
.input--textfield {
border: none;
color: transparent;
display: inline-block;
font-size: 2em;
text-shadow: 0 0 0 ay;
width: 2em;
&:focus {
outline: none;
}
}
HTML:
<input type="text" name="" value="10" class="input--textfield">