i want to change height & width of datalist HTML but it is not working.
how to solve this?
<input type="text" list="dose" />
<datalist id="dose" class="doseinput" style="height: 34px;width: 153px; ">
<option>1+1+1</option>
<option>1+1+0</option>
<option>1+0+0</option>
<option>0+1+0</option>
<option>0+0+1</option>
<option>0+1+1</option>
<option>1+0+1</option>
</datalist>
Give the height and width to the input tag instead of datalist.
<input type="text" list="dose" style="height: 34px;width: 153px;"/>
<datalist id="dose" class="doseinput">
<option>1+1+1</option>
<option>1+1+0</option>
<option>1+0+0</option>
<option>0+1+0</option>
<option>0+0+1</option>
<option>0+1+1</option>
<option>1+0+1</option>
</datalist>
You can't do it, replacement better use but are actually composed of regular HTML elements that CAN be styled.
this element is an example of a "replaced element", these are OS-dependent and are not part of the HTML/browser, it cannot be styled via CSS, you can style it via JS if you can.
For more information look exmaple here
https://stackoverflow.com/a/19217244/6701087
Related
I have a question regarding the datalist style. I got a code that removes the little arrow that is in the input (default in the Chrome browser). But now I can't find a way to style the suggestion box with CSS. I'm using Angular 15
HTML
<input type="text" class="form-control" role="search" list="impostoBox" id="impostoInp" style="position: relative;" name="impostoBox" aria label="Selecione o Imposto" tabindex="0" placeholder="Selecionar ou Digitar" [(ngModel)]="impostoValue" (change)="seleImp($event)">
<span for="impostoInp" class="material-symbols-outlined iconSelect525" aria-hidden="true">expand_more</span>
<datalist id="impostoBox">
<option *ngFor="let i of opImposto" [value]="i.name">{{i.name}</option>
</datalist>
SCSS
[list]::-webkit-calendar-picker-indicator {
opacity: 0;
}
I have code that removes the arrow but I cannot style the suggestion box in the form.
What you're trying to do is to add a custom styling to datalist which is controlled by the user's browser settings and cannot be directly modified with SCSS selector as you're doing.
Try to use a 3rd party lib to add custom styling and that will do the job.
I've been running around trying to figure out how I can use grid to format the layout of a form. I seem to be doing exactly what other coders are doing to utilize grid in CSS but it's just not working. My goal is to put the "type" selector to the right of the pet name and the reset button to the right of the submit button. Could someone point out what I'm missing?
my css code and what the form looks like
The HTML for the form
I think your issue might be because of the <div> you have on both input and select tags. By default div are block elements and browsers will start div on a new line by placing a line break before and after a div.
One quick fix is removing the div surrounding your Pet Name and
Type. If you must, have both of them in a single div.
Preferably use 1fr in place of 50%.
You will get this desired output
You are using seperate div for individual elements, that's why the elements are displaying one after another. You can put a common div for the elements which you want to display adjacent to each other.
<div class="grid">
<div>
<legend>Add pet</legend>
</div>
<div>
<label for="Name">Pet Name</label>
<input type="text" id="name" name="pet_name">
<label for="Type"></label>
<select id="type" name="pet_type">
<option value="Cat">Cat<option>
<option value="Dog">Dog<option>
<option value="Dog">Dog<option>
<option value="Dog">Dog<option>
</select>
</div>
<div>
<button type="submit" id="new_pet_submit_button">Create New Pet</button>
<button type="reset">Reset</button>
</div>
</div>
I'm new in HTML and CSS. In fact, it's my first site I build in my learning. Why doesn't :hover effect work on the class I've pointed it to?
I'd be really thankful for every help. But please explain, don't just show me "how to".
I'm trying to get the search_type selector getting visible only after hoovering the "search" button
Thanks in advance. (Here's the edited to be simpler code)
https://codepen.io/_Hiderr/pen/WNNdJdo
Like so: https://codepen.io/bjorniobennett/pen/OJJzZrX?editors=1100
The basic behaviour of :hover is that it can affect itself and the elements inside of it, or the next adjacent sibling . So I wrapped the search button and the select element in it's own container, and placed the :hover on the container itself. By placing the :hover on the container, you can now manipulate it's children.
<div class="search-container">
<select class="search selector" name="search_type">
<option value="">Videos</option>
<option value="search_users">Channels</option>
</select>
<input class="search button" type="submit" value="Search" />
</div>
Seems that your css selector has no match in the markup:
search.button:hover ~ .search.selector
would match any element like this:
<button class="search button">Search</button> <span class="search selector">Selected</span>
See: https://codepen.io/andreaslangsays/pen/RwwxyEN
I'm using Twitter Bootstrap. Select boxes are always narrower than input boxes.
How can I make them the same width? Adding padding helps, but it looks ugly.
EDIT
Here is a little example - http://jsfiddle.net/DfY8z/2/
Same example with custom class applied - http://jsfiddle.net/DfY8z/3/
I can use classes like span3, span4 etc. But I want my inputs to fill all available space (and to be the same size) so I'm using custom class.
Just adding input-sm class just next to the form-control worked for me.
<select class="form-control input-sm" id="xxx" ... >
<input type="text" value="" name=""><br>
<select>
<option>Some options which is very very long... </option>
</select>
The result is the exact size of the boxes.
You appear to be using an older version of bootstrap (current version is 2.2.1). Select boxes and input boxes in newer versions are the same size when no class is applied and when resized using the span* method
If you need to set a custom size you will have to use 2 different custom classes or target select boxes and input boxes individually. The input boxes need to be 14px smaller than select boxes (as do text areas).
See updated example
// code sample because its required
<input class="myClass" type="text" value="Abcdefghijklmnop" />
<br />
<br />
<select class="myClass">
<option> ABC </option>
<option> XYZ </option>
</select>
place the control
inside a div and apply class="col-sm-2" on the div.
<div class="col-sm-2">
<select></select>
you can change col-sm-2 col-sm-3 as per your requirement
This has worked for me -
Go to bootstrap.css file and comment out the following --
select.form-control:not([size]):not([multiple]) {
height: calc(2.25rem + 2px); }
This works:
<select style="width: 200px">...</select>
Please see the form HTML code below
<form method="post" action="register">
<div class="email">
Email <input type="text" tabindex="1" id="email" value="" name="email"> </div>
</div>
<div class="agreement">
<div tabindex="2" class="terms_radio">
<div onclick="changeTerm(this);" class="radio" id="terms_radio_wrapper" style="background-position: left 0pt;">
<input type="radio" id="terms" value="1" name="terms"><label for="terms">I have read and understood the</label>
</div>
</div>
</div>
<div class="form_submit">
<input type="button" tabindex="3" value="Cancel" name="cancel">
<input type="submit" tabindex="4" value="Submit" name="submit">
</div>
</form>
Here I styled the agreement check box in such a way that radio input is completely hidden and background image is applied to the wrapper div, and onclick of the wrapper div will toggle the background image as well as the checked status of the radio input.
I need to set the tabindex index on the 'terms_radio' DIV, simply tabindex="2" attribute on div is not working,
Is it possible to bring the dotted border on the label for the radio input up on pressing the TAB when the cursor is at email input field?
DIV elements are not compatible with tabindex in HTML4).
(NOTE HTML 5 spec does allow this, however, and it commonly works regardless)
The following elements support the tabindex attribute: A, AREA, BUTTON, INPUT, OBJECT, SELECT, and TEXTAREA.
Essentially anything you would expect to be able to hold focus; form elements, links, etc.
What I think you probably want to do here is use a bit of JS (I would recommend jQuery for something relatively painless) to bind to the focus event on the input element and set border on the parent div.
Stick this at the bottom of your body tag to grab jQuery from the Google CDN:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
Then something like this would probably do the trick:
$(function() {
$('div.radio input').bind({
focus : function() {
$(this).closest('div.radio').css('border','1px dotted #000');
},
blur : function() {
$(this).closest('div.radio').css('border','none');
}
});
});
Yes! There is a spec for it, its called WAI-ARIA and its for accessibility : https://www.w3.org/TR/wai-aria-practices/#kbd_general_between
You could simply change the tabindex value from 2 to 0.
<div tabindex="0" class="terms_radio">
This provides the default focus state that goes with the flow of your code.
https://www.w3.org/WAI/PF/aria-practices/#focus_tabindex
You can put tabindex="2" for radio element and hide the radio element (not with display:none, but with z-index, so that it stays tabbable). When you press tab being on email input field, radio gets focus, and you can use
input:focus+label {}
to style the label